Create a gist now

Instantly share code, notes, and snippets.

anonymous /menu_css.html
Created Dec 3, 2009

What would you like to do?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>:: jQuery ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style>
* {margin:0;padding:0;font:normal 11px tahoma,Verdana;outline:none}
#menu-container {height:22px;background:#2CBBE9;width:300px;margin: 30px 50px}
#menu-container ul {list-style:none;padding-top:4px}
#menu-container ul > li {position:relative}
#menu-container ul > li.menu-main-item {display:inline}
#menu-container a {text-decoration:none;padding:5px 10px;cursor:pointer;border:1px solid transparent}
#menu-container li.menu-main-item > a {text-shadow:1px 1px 1px #555;color:#fff}
#menu-container .menu-sub-item a {display:block;}
#menu-container .menu-sub-item {display:none;position:absolute;width:150px;padding:4px;border: 1px solid #79b7e7;background:#fff;z-index:999;-moz-box-shadow:4px 8px 10px #ccc;-webkit-box-shadow:4px 8px 10px #ccc}
#menu-container ul li:hover > a {border: 1px solid #79b7e7; background: #fff; font-weight: normal; color: #1d5987; outline: none; cursor:pointer;text-shadow:none}
#menu-container ul li:hover > ul {display:block;top:18px;*top:29px;left:0;border-width:0 1px 1px}
#menu-container ul li:hover > ul.menu-sub-item-level {top:0;left:149px;border-width:1px}
</style>
<body>
<div id="menu-container">
<ul>
<li class="menu-main-item">
<a>Item Principal</a>
<ul class="menu-sub-item">
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li>
<a>Sub item &raquo;</a>
<ul class="menu-sub-item menu-sub-item-level">
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li>
<a>Sub item &raquo;</a>
<ul class="menu-sub-item menu-sub-item-level">
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li>
<a>Sub item &raquo;</a>
<ul class="menu-sub-item menu-sub-item-level">
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-main-item">
<a>Item Principal</a>
<ul class="menu-sub-item">
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li>
<a>Sub item &raquo;</a>
<ul class="menu-sub-item menu-sub-item-level">
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
<li><a>Sub item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment