Welcome to WebmasterWorld Guest from 54.242.63.214

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal Drop Down Menu not working.

     

nlraley

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

5+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

5+ Year Member



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

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

5+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



#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

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

5+ Year Member



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

nlraley

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

5+ Year Member



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

nlraley

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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%;
}
*/

 

Featured Threads

Hot Threads This Week

Hot Threads This Month