Jump to content

CSS Only Multilevel dropdown menu


Recommended Posts

I've been working on this for a while and I've had varying levels of success but have not been able to achieve what I'm after so far. I'm looking to do this with CSS, no jquery or anything like it. I followed the "Son of Suckerfish" tutorial and that got me somewhat there, but when I tried to make the 2nd level dropdown, it started getting all funky and I haven't been able to figure it out. Not to mention, it isn't working properly in IE9 or FF, only Chrome and Safari (for Windows). Below is the design view of the dropdown navigation:dropdown.jpg So far, I've gotten it most of the way, but the 2nd level area with the green background, it does funky things with positioning and seems as if it has 2 different colored backgrounds. I'm sure it has something to do with the way the jquery is being used to position the first dropdown and it's causing the 2nd to act funny.dropdown2.jpgBasically, I'd like to get rid of the jquery, or at least figure out how to make it work with the way I've got it setup, and then figure out why the positioning is all wonky on the 2nd dropdown. Below is my CSS:

/* Navigation */#nav {font-family:Georgia; position: relative; width: 900px; height: 30px; font-size: 16px; font-weight: bold; color: #333; margin: 0px auto; padding:20px 14px 0 0;}#nav ul {list-style: none;}#nav a:link, #nav a:visited {display: inline-block; text-decoration:none; color:#333; padding: 0 10px; margin:0 6px 0 6px;}#nav a:active, #nav a:hover {background: #3d3d3d; color: #cbdb2a;}#nav li {float: left; width: auto;}#nav li ul {position: absolute; width: 8em; left: -999em; text-align: center;}#nav li:hover ul.nav_dd_1 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 82px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_2 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 157px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_2 li ul li a {background: #cbdb2a; color: #333;}#nav li:hover ul.nav_dd_3 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 158px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_4 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 163px; margin: 0 6px 0 6px;}#nav ul li:hover ul li a:hover {background: #cbdb2a; color: #333; }#nav li:hover ul, #nav li.sfhover ul {left: auto; text-align: center; }#nav li ul ul {margin: -25px 0 0 183px; width: 157px; background: #cbdb2a; color: #333; font-family: Arial; font-size: 12px; height: 25px;}#nav ul li:hover ul li ul li a:hover {background: #fff; color: #333; margin-left: 0px; height: 25px; width: 157px;}#nav li:hover ul ul, #nav li.sfhover ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {left: auto;}

And the HTML:

<div id="nav">	<ul>		<li><a href="#1">Why Lake</a>|			<ul class="nav_dd_1">				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>			</ul>		</li>		<li><a href="#2">Community Profile</a>|			<ul class="nav_dd_2">				<li><a href="#">Test Link</a>					<ul>						<li><a href="#">Sub Link</a></li>						<li><a href="#">Sub Link</a></li>						<li><a href="#">Sub Link</a></li>					</ul>				</li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>			</ul>		</li>		<li><a href="#3">Business Retention</a>|			<ul class="nav_dd_3">				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>			</ul>		</li>		<li><a href="#4">Business Attraction</a>|			<ul class="nav_dd_4">				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>				<li><a href="#">Test Link</a></li>			</ul>		</li>		<li><a href="#5">News</a>| </li>	  		<li><a href="#6">About Us</a> </li>	</ul></div>

I'm looking for any help anyone is willing to offer. Thanks!

Link to post
Share on other sites

I'm working on a similar menu too. This is may useful for you: HTML:

<ul id="menu"><li id="home"><a href="#">Home</a></li><li id="about"><a href="#">About Us</a><ul><li id="about2"><a href="#">The teams</a><ul><li><a href="#">History</a></li><li><a href="#">Vision</a></li><li><a href="#">History</a></li><li><a href="#">Vision</a></li></ul></li><li><a href="#">History</a></li><li><a href="#">Vision</a></li></ul></li><li id="products"><a href="#">Products</a><ul><li><a href="#">Cozy Couch</a></li><li><a href="#">Great Table</a></li><li><a href="#">Shiny Shelf</a></li><li><a href="#">Invisible Nothing</a></li></ul></li><li id="contact"><a href="#">Contact</a><ul><li><a href="#">Online</a></li><li><a href="#">Right Here</a></li><li><a href="#">Somewhere Else</a></li></ul></li></ul>

CSS:

/* menu */ul{font-weight: bold;font-size: 24px;margin: 0;padding: 0;list-style: none;}ul li{display: block;position: relative;float: left;}li ul{display: none;}ul li a{display: block;text-decoration: none;padding: 7px 5px 0px 5px;background: orange;white-space: nowrap;}li:hover ul{display: block;position: absolute;}li:hover li{float: none;font-size: 11px;}/* Hoofdmenu kleur */#about:hover a{background: red;}/* Submenu kleur */#about:hover ul a{background: yellow;}/* Hoofdmenu kleur (hover) */#about a:hover{background: red;}/* Submenu kleur (hover) */#about ul a:hover{background: green;}#about2 ul{display:none;}#about2:hover ul{display:block;left: 100%;top:0px;}#about2:hover ul a{background: purple;}#about2 ul a:hover{background: blue;}

Link to post
Share on other sites

Davidb52, thanks for sharing. I did manage to figure out some of my issues and most of it lied within some extra code that I ended up not needing. I think I was just copying and pasting other parts of my code for that 2nd layer without removing the parts I didn't need. I ended up getting it to line up how I needed it and all. My problem is that it's still acting goofy in other browsers. I'll have to dig in and find out why, Thanks,

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...