...

View Full Version : HTML/CSS Drop Down Menu Bar



peterbisset
05-14-2010, 02:49 PM
Hi,

I am creating my first drop down horizontal menu bar using html and css. The menu bar is located at www.devoteddomains.com.

I have two questions:

1. I am having difficulty with the thin white lines that appear to the left of each menu bar element, how can I get rid of these? Also what would be the best way to implement proper dividers between each menu element?

2. I want to have a different background on the the menu element if I am in that section of the website, how would I go about implementing this?

This is the CSS for the menu bar:

body{ behavior:url("csshover2.htc"); }
.new-menu-shell {
float: left;
height: 70px;
width: 960px;
}
.main-menu-section {
float: left;
width: 924px;
height: 40px;
margin-right: auto;
margin-left: auto;
background-image: url(web-design-services-images/main-menu-bg.jpg);
}
.new-menu-leftcorner {
background-image: url(web-design-services-images/menu-left-corner.jpg);
float: left;
height: 40px;
width: 18px;
}
.new-menu-rightcorner {
height: 40px;
width: 18px;
background-image: url(web-design-services-images/menu-right-corner.jpg);
float: left;
}



.pd_menu_01 {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
border:0px none #004080;
clear:both;
width: 924px;
} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:14px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
background-image: url(web-design-services-images/main-menu-bg.jpg);
background-repeat: repeat-x;
}
.pd_menu_01 ul {
list-style-type:none;
padding:0;
margin:0;
}
.pd_menu_01 ul li {
float:left;
z-index:auto;
border: 0px none #000000;
position: relative;
}
.pd_menu_01 ul li a {
color: #FFCC00;
float:none!important;
float:left;
display:block;
height:40px;
line-height:40px;
text-decoration:none;
padding-top: 0;
padding-right: 14px;
padding-bottom: 0;
padding-left: 14px;
background-color: #FFFFFF;
}
.pd_menu_01 ul li ul {
display:none;
border:none;
color: #000000;
background: #000000;
width: 1px;
}
.pd_menu_01 ul li:hover a {background-color:#000000; text-decoration:none; color:#FFCC00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:39px;
margin-top:1px;
left:0;
}
.pd_menu_01 ul li:hover ul li a {
display:block;
width:16em;
height:auto;
line-height:1.3em;
color:#000000;
background-image: url(web-design-services-images/menu-drop-down-bg.jpg);
font-size: 11px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
top: 20px;
} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#FFFFFF; text-decoration:none;color:#FFCC00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {text-decoration:none;color:#FFCC00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#FFFFFF; color:#000000;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
color:#000000;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-bottom-color: #004080;
border-left-color: #004080;
}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/

Thanks in advance,
Peter

abduraooft
05-14-2010, 03:46 PM
The nesting of tags in your drop down is not correct. Take a look at http://www.htmldog.com/articles/suckerfish/dropdowns/ to see the proper nesting.

<link href="web-design-services.css" rel="stylesheet" type="text/css" />
Also you've linked the same style sheet multiple times and they are not inside <head> of your page. (See http://validator.w3.org/check?uri=http://www.devoteddomains.com/)

Fixing the above may help you to fix your original issue.

peterbisset
05-14-2010, 07:38 PM
Thank you for your help, I have corrected the validation issues and have corrected the issue with nesting(I think?).

Unfortunately this has not got rid of the white borders, any other suggestions?

abduraooft
05-15-2010, 07:59 AM
and have corrected the issue with nesting(I think?). Not really! The easy and best way to nest list elements is like

<ul>
<li><a href="http://www.devoteddomains.com">HOME</a></li>
<li><a href="http://www.devoteddomains.com/website-design-packages.asp">WEBSITE DESIGN</a>
<ul>
<li>........</li>
<li>........</li>
</ul>
</li>
.........
</ul>
Also remove the repeated links to the same style sheet, which makes debugging a little difficult.

peterbisset
05-15-2010, 10:34 AM
Sorry I forgot to upload the new page!

The page now validates with the additional references to the CSS file removed (they were in inlclude files).

I have arranged the list as you describe above, unfortunately I still have the white border.

abduraooft
05-15-2010, 11:15 AM
Ah.. that border is there in your background image (http://www.devoteddomains.com/web-design-services-images/main-menu-bg.jpg) itself.

peterbisset
05-15-2010, 11:54 AM
Thanks, can't believe I didn't notice that!

What is the best way to put dividers between each of the menu elements?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum