homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Horizontal Drop Down Menu not working.
nlraley




msg:4031609
 5:10 pm on Nov 25, 2009 (gmt 0)

Okay, now that I've finally started to get the page layout like I was wanting, I have started working on my navigation menus.

I have never created one before and have been following some guides, but it doesn't appear to be working at all now.

I think I have something wrong in my order, but I can't quite put my finger on it. Any suggestions?

CSS:

/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}

h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}

h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}

body {
margin: 0;
border: 0;
background: #ededed;
}

/*============================ Begin Layout Structure ============================*/

#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #ffffff url(background2.png);
overflow: hidden;
}

#accountselector-wrapper {
position: relative;
float: left;
width: 100%;
height: 25px;
background: #ededed;
}

#accountselector-home {
position: relative;
float: left;
height: 25px;
width: 108px;
line-height: 25px;
text-align: center;
background: #ffffff url(accountselectorleft.png);;
}

#accountselector-business {
position: relative;
float: left;
height: 25px;
width: 108px;
line-height: 25px;
text-align: center;
background: #ffffff url(accountselectorright.png);
}

#accountselector-spacer {
position: relative;
float: left;
width: 808px;
height: 25px;
background: #ffffff url(spacerbackground.png);
background-repeat: repeat-x;
}

#headerwrapper {
position: relative;
margin-top: 5px;
width: 100%;
height: 300px;
}

#headerwrapper-left {
position: relative;
float: left;
width: 575px;
height: 100%;
background: #ffffff;
background-repeat: repeat-y;
margin-left: 20px;
}

#headerwrapper-left-logo {
position: relative;
height: 51px;
width: 100%;
}

#headerwrapper-left-navigation {
position: relative;
background: #ffffff;
height: 29px;
width: 100%;
line-height: 25px;
}

#headerwrapper-left-banner {
position: relative;
height: 220px;
width: 100%;
border: thin solid #939393;
}

#headerwrapper-right {
position: relative;
float: right;
width: 385px;
height: 280px;
border: thin solid #939393;
margin-right: 20px;
}

#headerwrapper-right-heading {
position: relative;
float:right;
width: 100%;
height: 15px;
line-height: 15px;
margin-top: 10px;
padding-left: 20px;
}

#headerwrapper-right-customer{
position: relative;
float: right;
width: 100%;
height: 185px;
padding-left: 20px;
}

#bodywrapper {
float: left;
position: relative;
min-height: 443px;
width: 100%;
margin-top: 0px;
}

#bodywrapper-leftwrapper {
position: relative;
float: left;
min-height: 443px;
width: 200px;
margin-left: 20px;
}

#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}

#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}

#bodywrapper-rightwrapper {
position: relative;
float: left;
min-height: 443px;
max-height: 100%;
width: 798px;
}

#bodywrapper-rightwrapper-body {
position: relative;
float: left;
height: 100%;
width: 100%;
}

#footer {
position: relative;
height: 100px;
width: 1024px;
clear: both;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
background: #ededed url(background3.png);
background-repeat: no-repeat;
}

#navmenu {
float: left;
height: 29px;
width: 100%;
line-height:29px;
background: #ededed url(buttonbg.png);
background-repeat: repeat-x;
text-align: center;
font-family: "Myriad Pro Black";
color: #004777;
}

#navmenu ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
float: left;
}

#navmenu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#navmenu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#navmenu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#navmenu a:hover {
color: #a00;
background: #fff;
}

#navmenu li {position: relative;}

#navmenu ul ul {
position: absolute;
z-index: 500;
}

#navmenu ul ul li {
position: absolute;
z-index: 500;
clear: left;
}

#navmenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#navmenu ul ul,
div#navmenu ul li:hover ul ul,
div#navmenu ul ul li:hover ul ul
{display: none;}

div#navmenu ul li:hover ul,
div#navmenu ul ul li:hover ul,
div#navmenu ul ul ul li:hover ul
{display: block;}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="test5.css">
<title></title>
</head>
<body>
<div id= "wrapper">
<div id="accountselector-wrapper">
<div id= "accountselector-home">Personal</div>
<div id= "accountselector-business">Business</div>
<div id= "accountselector-spacer">&nbsp;</div>
</div>

<div id= "headerwrapper">
<div id="headerwrapper-left">
<div id= "headerwrapper-left-logo">US Sonet Logo</div>
<div id= "headerwrapper-left-navigation">
<div id= "navmenu">
<ul>
<li><a href="test.html">Internet</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Telephone</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Television</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id= "headerwrapper-left-banner">US Sonet Banner</div>
</div>
<div id= "headerwrapper-spacer">&nbsp;</div>
<div id= "headerwrapper-right">
<div id="headerwrapper-right-heading">Manage My Account</div>
<div id="headerwrapper-right-customer">Account Control Center</div>
</div>
</div>
<div id="bodywrapper">
<div id="bodywrapper-leftwrapper">
<div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div>
<div id="bodywrapper-leftwrapper-news" >News</div>
</div>
<div id="bodywrapper-rightwrapper">
<div id="bodywrapper-rightwrapper-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.</p></div>
</div>
</div>
</div>
<div id= "footer">Test Footer</div>
</body>
</html>

Although it could be something to do with my container the menu is in, I'm not entirely sure.

Thanks in advance.

 

nlraley




msg:4031644
 6:00 pm on Nov 25, 2009 (gmt 0)

Okay, I broke down the code for just testing the menus and they appear to be working. However, when placing them in my divs that turns out to be a completely different story. Any ideas as to why?

D_Blackwell




msg:4031648
 6:08 pm on Nov 25, 2009 (gmt 0)

I'll look at this as time allows, but would recommend getting away from code dumps in these threads. It's going to cut into 'selling' people on picking your thread out of many threads from many fora.

The HTML and CSS could have been cut down to the issue at hand. That would be the first thing I would do; starting hacking out everything that is in the way of looking at the problem.

D_Blackwell




msg:4031665
 6:14 pm on Nov 25, 2009 (gmt 0)

Okay, I broke down the code for just testing the menus and they appear to be working. However, when placing them in my divs that turns out to be a completely different story. Any ideas as to why?

You were posting while I was working up a post.

Smart move, cutting the markup down to the problem. Now - comment markup in and out until they break. At this point, the solution will be obvious, or you should have streamlined markup to post that will be a lot easier to deal with, and that more people are more likely to take a look at.

D_Blackwell




msg:4031766
 7:49 pm on Nov 25, 2009 (gmt 0)

Admit that I haven't really looked at chopping down to the problem yet, but took a quick look through the CSS and have made a few notes as commments:

#navmenu {
/**********Why float left if the width is 100%? Also, as a block element, it is going to default to 100% width of its container anyway, so do you need either declaration?*/
float: left;
height: 29px;
width: 100%;
line-height:29px;
background: #ededed url(buttonbg.png);
background-repeat: repeat-x;
text-align: center;
/**********Use of <generic-family> is strongly recommended. How many users will have "Myriad Pro Black" installed? Most machines will default to a selection not on your list of preferences.*/
font-family: "Myriad Pro Black";
color: #004777;
}

#navmenu ul {
/**********list-style: is a shorthand, for which none; is not quite exactly a valid value. It works and it validates, but the more specific {list-style-type: none;} is cleaner, IMO*/
list-style: none;
margin: 0;
padding: 0;
/**********See previous note.*/
width: 100%;
float: left;
}

This is a potential indicator of bloated CSS and possibly overly complex.

nlraley




msg:4031767
 7:50 pm on Nov 25, 2009 (gmt 0)

Okay, that's crazy. I broke it down and redid it bit by bit and now it is working fine. How do you go about getting rid of the border for the first list item, the menu name you hover over to pull down the drop down menu?

nlraley




msg:4031804
 8:32 pm on Nov 25, 2009 (gmt 0)

Thanks, appreciate the help.

Perhaps I am just thinking too much of the coder in me and breaking things down a bit too much, thus over complicating things.

I guess I could break the css into multiple style sheets which would make things easier to differentiate. I can link multiple stylesheets right?

Also, I still have that border surrounding the boxes even though I commented it out the only part I noticed with a border in the code for the actual drop down menu. Am I going to be stuck with a border surrounding it? If so no biggie, but I was really wanting to use a background image for the list items in the ul.

nlraley




msg:4031816
 8:48 pm on Nov 25, 2009 (gmt 0)

And let me chop it down for you a bit.

CSS for the Menu:

/* CSS Document */
/* Top Navigation Menu Layout */

#navmenu {
float: left;
height: 29px;
width: 100%;
line-height:29px;
background: #ededed url(buttonbg.png);
background-repeat: repeat-x;
text-align: center;
font-family: Verdana, helvetica;
color: #004777;
}

#navmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 29px;
}

#navmenu a, #menu h2 {
font: bold 11px/16px Verdana, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#navmenu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#navmenu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#navmenu a:hover {
color: #a00;
background: #fff;
}

#navmenu li {
position: relative;
float: left;
width: 115px;
}

#navmenu ul ul {
position: absolute;
z-index: 500;
}

#navmenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#navmenu ul ul,
div#navmenu ul li:hover ul ul,
div#navmenu ul ul li:hover ul ul
{display: none;}

div#navmenu ul li:hover ul,
div#navmenu ul ul li:hover ul,
div#navmenu ul ul ul li:hover ul
{display: block;}

This is contained within a div specified as 100% width of my parent container and a height of 29px. However, it doesn't appear to be taking on this height property.

D_Blackwell




msg:4031817
 8:51 pm on Nov 25, 2009 (gmt 0)

I guess I could break the css into multiple style sheets which would make things easier to differentiate. I can link multiple stylesheets right?

You could use multiple stylesheets, and there are good reasons for doing so; however, this is a small, simple page. Streamlining what you have would be my choice.

Also, I still have that border surrounding the boxes even though I commented it out the only part I noticed with a border in the code for the actual drop down menu. Am I going to be stuck with a border surrounding it? If so no biggie, but I was really wanting to use a background image for the list items in the ul.

No. You are not stuck with the border. You think that you have commented it out, but if you have done so properly, then clearly you have missed another declaration that affects the border issue.

There is no reason that you shouldn't be able to use background-image: for the <li>, but one problem at a time. Fix the border first, then add the background-image:

May be time to step away for awhile and come back fresh. If the menus are working correctly now, then you are down to the 'silly simple' stuff.

D_Blackwell




msg:4031833
 9:03 pm on Nov 25, 2009 (gmt 0)

#navmenu a, #menu h2 {
font: bold 11px/16px Verdana, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

The <a> is set to display as a block element, so it is filling the entire <li>. There's your border. (Also the only border to choose from in the last CSS provided.)

nlraley




msg:4031851
 9:23 pm on Nov 25, 2009 (gmt 0)

Any ideas as to why my height isn't a full 29px?

nlraley




msg:4031852
 9:24 pm on Nov 25, 2009 (gmt 0)

Nevermind, I just increased my padding to where the borders didn't overlap.

nlraley




msg:4031859
 9:32 pm on Nov 25, 2009 (gmt 0)

Okay, one last thing and I should have it now.

I've increased the padding in my #navmenu a, #menu h2, but I have found out that it sometimes closes the pull down menu if you catch it just right between the pulldown menu heading and the first item in the list.

Any ideas as to why?

And finally, is there a way to just change the background of the actual pull down items when the pulldown menu heading is hovered over? I would like for the header to have the background image of my navigation bar but for the menu itself to have a different image than the header. Right now as fas as I have been able to tell I change 1 I change the other.

D_Blackwell




msg:4031867
 9:49 pm on Nov 25, 2009 (gmt 0)

I can't keep up with your questions. Start to work up and answer and the question changes. Work the problem as far as you can, then step away. (Really. Ask the questions - but then hold off until prepared to wait for some responses.)

I will suggest again that you look to streamlining. For example, you have a line-height: declared where there is only one line of text. Your use is a hack around its intended function, which is to determine leading space between lines of text.

Can you make some cuts of junk markup with no ill effect?

#navmenu {
/**********float: left;*/
/**********height: 29px;*/
/**********width: 100%;*/
/**********line-height: 29px;*/
background: #ededed url(buttonbg.png) repeat-x;
text-align: center;
font-family: Verdana, helvetica sans-serif;
color: #004777;
}

and/or

/**********
#navmenu ul ul {
position: absolute;
z-index: 500;
}

#navmenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
*/

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved