css multilevel menu help

Stickybomb · May 21, 2007

hi i am trying to create a menu for a website i am working on and am running into some problems along the way

here is the code

<style type="text/css">
    .menubar, .lvl2, .lvl3
    {
      padding: 0;
      margin: 0;
      cursor:pointer;
      list-style-type: none;
    }
    .menubar li {
    	background: #cccccc;
    	padding: 0 3px;
    	text-align:center;
    	float:left;
    	margin-left:7px;
    }
    .lvl2 {
    	display: none;
    	position:relative;
    	float:left;
    }
    .lvl3 {
    	display:none;
    	position:relative;
    	float:right;
    }
     .lvl2 li {
    	background: #000000;
    	padding: 0 3px;
    	text-align:left;
    	float:none;
    }
    .lvl3 li {
    	background: #000000;
    	padding: 0 3px;
    	text-align:left;
    	float:none;
    } 
    .menubar li a{
    	font-family:veranda,arial,helvetica;
    	font-size:12px;
    	font-weight:bolder;
    	text-decoration:none;
    	color:#FFF;
    }
    .lvl2 li a{
    	font-family:veranda,arial,helvetica;
    	font-size:12px;
    	font-weight:bolder;
    	text-decoration:none;
    	color:#848282;
    }
    .lvl3 li a{
    	font-family:veranda,arial,helvetica;
    	font-size:12px;
    	font-weight:bolder;
    	text-decoration:none;
    	color:#848282;
    }
.menubar li:hover {
	background: #000000;
}
.menubar li:hover .lvl2 {
	display:block;
}
.lvl2 li:hover .lvl3 {
	background: #000000;
	display:block;
}
.lvl2 li:hover {
	background: #848282;
}
.lvl3 li:hover {
	background: #848282;
}
.lvl2 li:hover a {
	color: #FFFFFF;
}
.lvl3 li:hover a {
	color: #FFFFFF;
}
  </style>
  
  <!--[if lte IE 6]>
    <style type="text/css">
      body
      {
        behavior: url('csshover2.htc');
      }
      
      #menubar ul li a
      {
        /*display: inline-block;*/
      }
    </style>
  <![endif]-->
</head>

<body>
  <p>Below you should see a CSS driven menu bar.</p>

  
					<ul class="menubar">
						<li><a href="">HOME</a></li>

						<li><a href="">ABOUT</a>
							<ul class="lvl2">
								<li><a href="">History/Timeline</a></li>
								<li><a href="">Contact Info</a></li>
								<li><a href="">Quality Policy</a></li>
							</ul>
						</li>

						<li><a href="">PRODUCTS</a>
							<ul class="lvl2">
								<li class="sub"><a href="">New Products</a>
									<ul class="lvl3">
										<li><a href="">Pricing</a></li>
										<li><a href="">Specs</a></li>
										<li><a href="">Get Demo</a></li>
									</ul>
								</li>
								<li><a href="">Used/Company Resale</a></li>
								<li><a href="">Attachments</a></li>
								<li><a href="">The See In Action</a></li>
								<li><a href="">Parts</a></li>
							</ul>
						</li>

						<li><a href="">COMPANY STORE</a></li>

						<li><a href="">SALES</a>
							<ul class="lvl2">
								<li><a href="">Account Mgrs</a></li>
								<li><a href="">Global Sales & Distribution</a></li>
								<li><a href="">North American Distributors</a></li>
								<li><a href="">Industrial Sales & Distribution</a></li>
							</ul>
						</li>

						<li><a href="">SERVICE &AMP; SUPPORT</a>
							<ul class="lvl2">
								<li class="sub"><a href="">Parts</a>
									<ul class="lvl3">
										<li><a href="">General Info</a></li>
										<li><a href="">Documents</a></li>
									</ul>
								</li>
								<li class="sub"><a href="">Warranty</a>
									<ul class="lvl3">
										<li><a href="">General Info</a></li>
										<li><a href="">Documents</a></li>
									</ul>
								</li>
								<li><a href="">Sales & Distribution</a></li>
								<li><a href="">Training</a></li>
								<li class="sub"><a href="">Distributor Tools</a>
									<ul class="lvl3">
										<li><a href="">GPS</a></li>
										<li><a href="">Company Plus</a></li>
									</ul>
								</li>
							</ul>
						</li>

						<li><a href="">COMPANY OWNERS</a>
							<ul class="lvl2">
								<li><a href="">Warranty Info</a></li>
								<li><a href="">E-News Signup</a></li>
								<li><a href="">Faqs</a></li>
							</ul>

						<li><a href="">EMPLOWMENT</a></li>

						<li><a href="">FAQS</a></li>

						<li><a href="">CONTACT INFO</a></li>
					</ul>
</body>

</html>

the problems i am running into, first off i have provided a picture of what the menu should look like.

problems

* the first or main level needs to be elastic by the text with a 3px padding on either side, when you hover i do not want it to expand to the width of the sub level menu

*i want the items in the sub levels to entirely change color when you mouse over them

*lastly i need to get the third lvl to show to the right of the item selected in the second lvl

you should note that all the items are to be controlled by the size of the text with 3px padding no set widths

can anyone please give me some help or guidence with this i am trying everything i can think of with little or no luck.

thks stickybomb

ToonMariner · May 21, 2007

google suckerfish - you will get (IMO) to best css based drop-down....

Stickybomb · May 21, 2007

telling me to google something is not exactly helpfull this is based off of hat i have learned researching suckerfish i am looking for any guidence on the matter since suckerfish documentation is limited in the sence of multi- level from what i can find.

This is the second time you have responded to my post telling me to google something i consider this spam just for your reference and will report you should it happen again

AndyB · May 21, 2007

Maybe this - http://www.seoconsultants.com/css/menus/vertical/ will help since it includes explanations (and I've got them working in IE and FF both vertical and horizontally so I know it works.

Stickybomb · May 23, 2007

thks for the link that is probaly the most detail source i have seen helped alot. only problem i am having now is that i can not get it to show up horizontal in ie6.

I have tried changing everythin that i floated to display:inline-block with no luck

here is what i have

main css

.nav {
position:relative;
float:left;
top:.2em;
width:100%;
}

.nav ul /* settings for all levels */ {
cursor:pointer;
float:left;
list-style-type:none;
margin:0;
padding:0;
}

.nav ul li {
height:22px;
margin:0 0 0 1.4em;
padding:0 .3em;
}

.nav ul li h2 {
margin:0;
padding:0;
}

.nav ul ul li,.nav ul ul ul li {
margin:0;
}

.nav li {
position:relative;
}

.nav ul ul {
display:none;
left:0;
position:absolute;
top:100%;
}

.nav ul ul ul {
display:none;
left:100%;
position:absolute;
top:0;
}

.nav ul ul li {
background:#000;
height:auto;
padding:.2em .3em;
text-align:left;
width:15em;
}

.nav ul ul ul li {
background:#000;
color:silver;
height:auto;
padding:.2em .3em;
text-align:left;
width:8em;
}

.nav ul li a,.nav li h2 {
color:#FFF;
font-family:veranda,arial,helvetica;
font-size:12px;
font-weight:bolder;
text-decoration:none;
}

.nav li:hover {
background:#000;
}

.nav ul ul li.sub,.nav ul ul li.sub:hover {
background-image:url("images/sm-Arrow.png");
background-position:right 50%;
background-repeat:no-repeat;
}

.nav li img {
margin-top:-0.2em;
}

.nav ul ul ul li a,.nav ul ul li a {
color:silver;
font-family:veranda,arial,helvetica;
font-size:11px;
font-weight:bolder;
text-decoration:none;
}

.nav li:hover .lvl2,.nav ul ul li:hover .lvl3 {
display:block;
}

.nav ul ul li:hover,.nav ul ul ul li:hover {
background:#848282;
}

.nav ul ul li:hover a,.nav ul ul ul li:hover a {
color:#FFF;
}

ie6 css

body {
behavior: url('iehover.htc');
}

.nav {
position:relative;
float:none;
top:0;
width:100%;
}

.nav ul {
display: inline-block;
float:none;
}

any assitence with this would be great thks

sticky

Stickybomb · May 24, 2007

ok i am still having problem getting ie6 to render my menu horizontal

i put the menu up in a test area so you can view it and hopefully some assistence with it

http://www.3dmonic.com/test

any help on this matter would be great thks

sticky

bronzemonkey · June 1, 2007

I usually use conditionals to get my drop-downs working in IE6

For example:

<ul id="nav">

<li><a href="/menu/index.html">PART1<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/menu/1.html" title="">Text1</a></li>
<li><a href="/menu/2.html" title="">Text2</a></li>
<li><a href="/menu/3.html" title="Styling forms">Text3</a></li>
<li><a href="/menu/4.html" title="">Text4</a></li>
<li><a class="drop" href="/menu/5.html" title="">Text5<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="/menu/sub5a.html" title="">Text</a></li>
	<li><a href="/menu/sub5b.html" title="">Text</a></li>
	<li><a href="/menu/sub5c.html" title="">Text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
        </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

And then add this to my css to kill the table so that the menu works in IE

ul#nav table {position:absolute; top:0; left:0;}

See if you have any luck with that

Sign In

css multilevel menu help

Recommended Posts

Stickybomb

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Stickybomb

Link to comment

Share on other sites

AndyB

Link to comment

Share on other sites

Stickybomb

Link to comment

Share on other sites

Stickybomb

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information