Skip to content

Instantly share code, notes, and snippets.

@matherton

matherton/Drop Down ie.css

Last active August 29, 2015 13:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matherton/10449305 to your computer and use it in GitHub Desktop.
Save matherton/10449305 to your computer and use it in GitHub Desktop.
Download ZIP
Simple drop dow Nav
Raw
Drop Down ie.css
ul.dropdown ul li { display: inline; width: 100%; }
Raw
index
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>
<body>
<div id="page-wrap">
<ul class="dropdown">
<li><a href="#">About Us</a>
<ul class="sub_menu">
<li><a href="#">Matchbyte</a></li>
<li><a href="#">Personnel</a>
<!--<ul>
<li><a href="#">Indoor</a></li> THIRD LEVEL IF NEEDED
<li><a href="#">Outdoor</a></li>
</ul>-->
</li>
<li><a href="#">Who we are</a></li>
<li><a href="#">Work with</a></li>
<li><a href="#">Charity</a></li>
</ul>
</li>
<li><a href="#">Solutions</a>
<ul class="sub_menu">
<li><a href="#">Engine development</a></li>
<li><a href="#">Communications</a></li>
<li><a href="#">Systems</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Reporting</a></li>
</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Learning Zone</a></li>
</ul>
</div>
</body>
</html>
Raw
jquery.dropdownPlain
$(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
});
Raw
style
* { margin: 0; padding: 0; }
body { font: 14px Helvetica, Sans-Serif; }
#page-wrap { width: 800px; margin: 25px auto; }
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }
/*
LEVEL ONE
*/
ul.dropdown { position: relative; }
ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #000; opacity: 0.6; filter: alpha(opacity=60);}
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
ul.dropdown li a { display: block; padding: 14px 18px; color: #fff; opacity: 1; filter: alpha(opacity=100);}
ul.dropdown li:last-child a /*{ border-right: none; } Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { background: #4ec6ba; color: black; position: relative; }
ul.dropdown li.hover a { color: #000; opacity: 1; filter: alpha(opacity=100); }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000;
border-bottom: 1px solid #ccc; float: none; opacity: 1; filter: alpha(opacity=100); }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; color: #000; }
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment