• I want to thank all the members that have upgraded your accounts. I truly appreciate your support of the site monetarily. Supporting the site keeps this site up and running as a lot of work daily goes on behind the scenes. Click to Support Signs101 ...

Problem with my design

J

judead

New Member
Hey I have put together a couple css layouts that were free and I have learned a lot in a little bit, but I am having a problem getting this menu bar to have drop down options. I am going to include my html and css any help would be appreciated as I have worked on this for days and have gotten a drop down to work but it seems to change the page completely. This is only a portion of the web page not the full thing. The css is complete.

Any help in advance I thank you.

html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dickson Graphics</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="head">
<div id="head_cen">
<div id="head_sup" class="head_pad">
<p class="search">
<label>SEARCH</label>
<input name="search" type="text" class="txt" />
<input name="search-btn" type="submit" class="btn" value="SEARCH" />
</p>
<h1 class="logo"><a href="index.html">Dickson Graphics Home</a></h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="active" href="about.html">ABOUT</a></li>
<li><a href="products.html">PRODUCTS</a></li>
<li><a href="services.html">SERVICES</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>


CSS


html{background:#151515}
body {margin:0; background:#151515; font-family:"Trebuchet MS", Arial,
Helvetica, sans-serif}
* {margin:0; padding:0}
a {outline:0; text-decoration:none}
img {border:0}
h1,h2,h3,h4,h5,h6 {font-weight:normal}
li {list-style:none}

#head {width:100%; float:left; background:url(../images/headBg.png) repeat-x}
.head_height {height:478px}
.head_pad {padding-bottom:30px}
#head_cen {width:800px; margin:0 auto}
#head_sup {width:800px; float:left; position:relative}
#head p.search {width:auto; margin-top:12px; float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:11px; color:#999999; line-height:25px; letter-spacing:1px}
#head p.search label {width:auto; margin-right:10px; float:left}
#head p.search input.txt {width:135px; height:21px; margin-right:7px; float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#2c2d2c; border:0; background:url(../images/searchbg.png) no-repeat}
#head p.search input.btn {width:68px; height:21px; float:left; border:0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:11px; color:#999999; text-align:center; cursor:pointer; background:url(../images/searchbtn.png) no-repeat}
#head p.search input.btn:active {background-position:2px 2px}
h1.logo {width:220px; height:115px; margin-top:80px; float:left; background:url(../images/logo.png) no-repeat}
h1.logo a {width:100%; height:100%; float:left; text-indent:-9999px}
#head ul {width:515px; height:44px; margin-top:58px; float:right}
#head ul li {width:auto; margin-left:1px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#5f5f5f; line-height:35px; text-transform:uppercase}
#head ul li:first-child {margin:0}
#head ul li a,#head ul li a.active {width:auto; height:42px; padding:0 23px; float:left; color:inherit; background:#252525}
#head ul li a:hover,#head ul li a.active {color:#31a1ff; background:#272727}
#Slider_Splash {width:1000px; height:350px; float:left; outline:0; position:absolute; top:225px; left:0px; z-index:10}
img.ban_bg {width:auto; float:left; position:absolute; top:139px; left:-24px}

#content {width:100%; padding-bottom:200px; float:left; background:#ffffff url(../images/contentBg.png) repeat-x}
#content_cen {width:800px; margin:0 auto}
#content_sup {width:800px; float:left; position:relative}
#ct_pan {width:100%; height:120px; margin-top:94px; float:left; position:relative; font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#999999; line-height:16px; background:#3b3b3b}
#ct_pan p {width:720px; margin:34px 52px 0 34px; float:left}
#ct_pan p a {color:#31a1ff; text-transform:uppercase}
#ct_pan ul {width:195px; margin-top:26px; float:left}
#ct_pan ul li {width:100%; float:left}
#ct_pan ul li a {color:inherit; text-decoration:underline; line-height:20px}
#ct_pan ul li a:hover {color:#31a1ff}
#ct_pan a.tweet {
width:95px;
height:102px;
float:right;
position:absolute;
right:-32px;
top:62px;
background:url(../images/tweet.png) no-repeat
}
#ct_pan a.facebook {
width:75px;
height:87px;
float:left;
position:absolute;
left:-52px;
top:62px;
background:url(../images/facebook.png) no-repeat
}

#welcom_pan {width:100%; margin-top:37px; padding-bottom:36px; float:left; border-bottom:#c9c9c9 solid 1px; background:url(../images/crosslines.png) no-repeat right 8px}
h2 {width:auto; margin-top:9px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:26px; color:#31a1ff; font-weight:bold; line-height:30px; letter-spacing:-1.7px}
h2 span {color:#3b3b3b; text-transform:uppercase; margin-right:5px}
#welcom_pan a.brochure {width:auto; height:54px; margin-right:31px; padding:0 8px 0 0; float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; font-weight:bold; line-height:54px; background:url(../images/buttonBg.png) no-repeat right -54px}
#welcom_pan a.brochure span {width:auto; height:54px; padding:0 13px 0 23px; float:left; background:url(../images/buttonBg.png) no-repeat 0 0}
#welcom_pan p {width:755px; margin:25px 0 0 14px; float:left; font-size:12px; color:#4d4d4d; line-height:18px}
#welcom_pan iframe {margin:37px 0 0 14px; float:left; border-bottom:#c9c9c9 solid 1px; background:url(../images/crosslines.png) no-repeat right 8px}
#welcom_pan a.enlarg {width:auto; margin:15px 0 0 14px; float:left; color:#848484}
#welcom_pan h3 {clear:left}
.lftWrap {width:300px; float:left; clear:left}
.lftWrap p {width:100%; float:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:28px; color:#4d4d4d}
.rgtWrap input.txt {width:176px; margin:20px 20px 0 0; padding:3px 5px; height:30px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#bfbfbf; font-weight:bold; border:#cbcbcb solid 1px; background:#ffffff}
.rgtWrap input.btn {width:113px; height:42px; margin-top:18px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#ffffff; font-weight:bold; text-align:center; cursor:pointer; border:0; background:url(../images/submitBtn.png) no-repeat}
.rgtWrap input.btn:active {background-position:1px 1px}
.rgtWrap {width:500px; float:left}
.rgtWrap h3 {width:100%}
h3 {width:auto; float:left; font-family:Arial, Helvetica, sans-serif; font-size:26px; color:#31a1ff; font-weight:bold; line-height:60px; letter-spacing:-1.7px}
h3 span {color:#3b3b3b; margin-right:0px}
ul#infoPan {width:100%; float:left}
ul#infoPan li {width:226px; margin-left:56px; float:left}
ul#infoPan li:first-child {margin:0}
ul#infoPan li h3 {width:100%; height:67px; float:left; font-size:26px; color:#31a1ff; font-weight:bold; line-height:60px; letter-spacing:-1.7px}
ul#infoPan li h3 span {color:#3b3b3b; margin-right:2px}
ul#infoPan li h3 img {margin-right:31px; float:right}
ul#infoPan li p {width:100%; margin-top:25px; float:left; font-size:18px; color:#848484; line-height:24px; letter-spacing:-0.8px}
ul#infoPan li p.descrip {margin-top:13px; font-size:12px; line-height:16px;}

#quotPan {width:848px; height:80px; margin-top:42px; float:left; position:relative; left:-24px; border-top:#c9c9c9 solid 1px; background:url(../images/pat.png) repeat }
#quotPan h3 {width:274px; margin:14px 0 0 24px; float:left; line-height:45px}
#quotPan input.txt {width:176px; margin:20px 20px 0 0; padding:3px 5px; height:30px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#bfbfbf; font-weight:bold; border:#cbcbcb solid 1px; background:#ffffff}
#quotPan input.btn {width:113px; height:42px; margin-top:18px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#ffffff; font-weight:bold; text-align:center; cursor:pointer; border:0; background:url(../images/submitBtn.png) no-repeat}
#quotPan input.btn:active {background-position:1px 1px}

#foot {width:100%; height:175px; float:left; background:url(../images/footBg.png) repeat-x}
#foot_cen {width:900px; margin:15px auto 0 auto}
#foot h6 {width:138px; height:72px; margin:0 auto; text-indent:-9999px; background:url(../images/logo2.png) no-repeat}
#foot h6 a {width:100%; height:100%; float:left}
#foot ul {width:340px; margin:11px auto 0 auto}
#foot ul li {width:auto; float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#767676; line-height:18px}
#foot ul li a {width:auto; float:left; color:inherit}
#foot ul li.space {width:auto; float:left; padding:0 6px}
#foot p {width:100%; margin-top:10px; float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#767676; line-height:18px; text-align:center}
#foot p a {color:inherit}

#service_pan {width:100%; margin-top:20px; float:left}
#service_pan ul {width:100%; float:left}
#service_pan ul li {width:325px; height:100px; margin:0 30px; float:left; border-bottom:#c9c9c9 solid 1px}
/*#service_pan ul li:first-child {border:0}
*/#service_pan ul li:hover {background:#fbfbfb}
#service_pan ul li h5 {width:auto; margin:10px 0 0 10px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#31a1ff}
#service_pan ul li p {width:300px; margin:5px 0 0 10px; float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#5c5c5c}
#service_pan ul li p a {width:auto; float:right; color:#31a1ff}
 
peavey123

peavey123

New Member
ugh. Looks like you need heaps of help. Your menu (unordered list) is just a plain list that are links. Nothing will drop down as it is. Not sure what to suggest but to maybe hire a real web developer? Looks like you are in over your head IMHO.
 
You must log in or register to reply here.
Top