Skip to content

Instantly share code, notes, and snippets.

@mortendk

mortendk/cssdropdown-4levels.html

Created December 14, 2011 13:46
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mortendk/1476627 to your computer and use it in GitHub Desktop.
Save mortendk/1476627 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Drop Down Menu 4 levels
Raw
cssdropdown-4levels.html
<!doctype html>
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<head>
<title>CSS Drop Down Menu</title>
<style type="text/css" media="screen">
/* ------------------------------------------------------------------
Dropdown widget
Markup:
<nav class="dropdown">
<ul>
<li>
<a href="#">first</a>
</li>
<li>
<a href="#">second</a>
<ul>
<li><a href="#">second one</a></li>
<li class="expanded">
<a href="#">second one</a>
<ul>
<li><a href="#">third</a></li>
<li><a href="#">third 2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Third</a>
</li>
</ul>
</nav>
------------------------------------------------------------------ */
/*
Dropdown Structure
------------------------------------------------------------------ */
.dropdown a{display:block;}
.dropdown ul li{float:left; position:relative; list-style:none;}
/* lvl 2 : hide the ul & bring it back on hover */
.dropdown ul li ul{ left:-99999px; position:absolute; list-style:none; margin:0; background:transparent;}
.dropdown ul li:hover ul{left:0;}
.dropdown ul ul li{position:static;float:none;}
.dropdown ul ul a{ white-space:nowrap; }
/* lvl 3 : hide & showx*/
.dropdown ul ul li ul {display: none; background:transparent; }
.dropdown ul ul li:hover ul {display: block; top:auto; }
.ie7 .dropdown ul ul li:hover ul {margin-top:0px}
/* lvl 4 : hide & show the 4th level need a helper class: expanded*/
.dropdown ul ul ul ul li {display: none;}
.dropdown ul ul ul li.expanded:hover ul li {display: block; top:auto;}
.ie7 .dropdown ul ul ul li:hover ul {margin-top:-2px}
.ie7 .dropdown ul ul ul li.expanded:hover ul li {margin-top:-20px;}
/* sensible Defaults › */
.dropdown li.expanded > a:after{content:" \203A " }
/* lvl 3 */
.dropdown ul ul li a{width: 120px; height: 20px; overflow: hidden;}
.dropdown ul ul li:hover ul{left: 120px; margin-top:-20px;}
/* lvl 4 */
/*
Dropdown Skin
------------------------------------------------------------------ */
.dropdown .expanded > a:after{content:" \203A " }
.dropdown ul ul li a:hover{background:#bbb}
.dropdown .expanded a{background:#bbb}
/* lvl 1 */
.dropdown ul li > a {background:#ddd; border-bottom:1px solid #ddd; border-left:1px solid #ccc; padding:0 5px}
.dropdown ul li:hover a {background:#ccc; border-bottom:1px solid #bbb; }
/* lvl 2*/
.dropdown ul ul li a{width: 120px; height: 20px; overflow: hidden; border-left:none}
.dropdown ul ul li a:hover {color:#666;}
/* lvl 3*/
.dropdown ul ul li:hover ul{left: 130px; margin-top:-21px;}
.dropdown ul ul li ul a {width:120px; border-left: 1px solid #333; }
.dropdown ul ul li:hover ul a {border-left: 1px solid #bbb;}
/*
general styles
------------------------------------------------------------------ */
a{ text-decoration:none;}
ul{maring:0; padding:0;}
#main{background: green; min-height:600px}
/* clearfix */
.cf:before,.cf:after {content:""; display:table;}
.cf:after { clear:both;}
.cf { zoom:1;}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header class="cf">
<nav class="dropdown">
<ul>
<li>
<a href="#">menu 1</a>
</li>
<li>
<a href="#">two</a>
<ul>
<li><a href="#">two to one</a></li>
<li><a href="#">two to 2</a></li>
</ul>
</li>
<li>
<a href="#">three</a>
<ul>
<li class="expanded">
<a href="#"> here comes a sub</a>
<ul>
<li>
<a href="#"> level 3 1 punkt</a>
</li>
<li class="expanded">
<a href="#"> level 3 2 two wot</a>
<ul>
<li>
<a href="#"> 444 </a>
</li>
<li>
<a href="#"> 444 </a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Lorem ips </a></li>
<li class="expanded">
<a href="#"> foobar to the bar</a>
<ul>
<li><a href="#"> level 3 igen 1 punkt</a></li>
<li><a href="#"> level 3 igen 2 baby</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">heres the last one</a></li>
</ul>
</nav>
</header>
<div id="main" role="main">
<form action="" method="get" accept-charset="utf-8">
<p><input type="submit" value="Continue &rarr;" /></p>
</form>
lorem
</div>
<footer>
</footer>
</div> <!--! end of #container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment