I have a simple <nav> with an unordered list inside:
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li a:nth-child(1):hover {
background: red;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
I am trying to make a different color on hover for each child <a>
but instead it is selecting all of them (highlighting them red)
nav li a:nth-child(1):hover {
background: red;
}
What am I doing wrong?
All your A are the first element of their parent. You must apply the nth-child on the LI element, not on the A:
nav li:nth-child(1) a:hover {
background: red;
}
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: red;
}
nav li:nth-child(2) a:hover {
background: #555;
}
nav li:nth-child(3) a:hover {
background: green;
}
nav li:nth-child(4) a:hover {
background: blue;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: green;
}
nav li:nth-child(2) a:hover {
background: blue;
}
nav li:nth-child(3) a:hover {
background: pink;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
Related
I need to display sub-sub-menu on hover of my sub-menu. So far I did code to display menu -> sub-menu on menu click, but to proceed I want a functionality to display sub-sub-menu on hover of my sub-menu. Can somebody help me to achieve the same?
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
// $(this).find('div.subsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
float: left;
width: 600px;
height: 30px;
background: black;
margin-top: 10px;
position: relative;
font-size: 15px;
margin-left: 30px
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
color: red;
text-decoration: none;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
color: #00537F;
width: 600px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul.submenu a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topnav">
<ul>sds
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
Try the following snippet without using jquery or javascript, you can get it done using only css. And have updated according to your question
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #000000;
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
line-height: 35px;
color: #fff;
}
#nav li li a {
font-size: 80%;
}
#nav li:hover {
background: #ff0000;
}
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
}
#nav li:hover ul ul {
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li li:hover ul {
display: block;
margin-left: 200px;
margin-top: -35px;
}
<div id="topnav">
<ul id="nav">
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data ⇒
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
you can try this
#menu {
background: #343434;
color: #eee;
height: 35px;
border-bottom: 4px solid #eeeded
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 -1px 0 #000;
border-right: 1px solid #444;
border-left: 1px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #eee;
}
#menu li:hover > a,
#menu li a:hover {
background: #111
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: 180px;
background: #111;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu ul.menus a:hover {
background: #333;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 180px;
background: #111;
top: 0;
width: 180px;
}
#menu ul.menus .submenu li {
background: #111;
}
#menu ul.menus .has-submenu:hover .submenu {
display: block;
}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
</ul>
</nav>
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
I'm trying to create a navbar that has my page links centered in the middle with a logo aligned to the left side and another link aligned to the right side. With my current setup, what would I have to do to create that?
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
background: #666 url(nav-bg.png) repeat-x 0 0;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #fff;
text-decoration: none;
}
#trans-nav li a:hover {
color: #0F0
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 8em;
background: #63867f;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #666
}
#trans-nav li ul li a:hover {
background: #666
}
#trans-nav {
background-color: #666;
}
<ul id="trans-nav">
<li>Home
</li>
<li>About
</li>
<li>Products
<ul>
<li>Widgets
</li>
<li>Thingamabobs
</li>
<li>Doohickies
</li>
</ul>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
I created a simple example of what you're looking for. Maybe take some pointers from it.
HTML
<header>
<div class="logo">
<span>Logo</span>
</div>
<nav class="nav">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</nav>
<div class="other">
Link
</div>
</header>
CSS
header {}
a {
color: #FFF;
}
.logo,
.nav,
.other {
float: left;
min-height: 50px;
color: #FFF;
}
.logo {
width: 25%;
background: #333;
}
.logo span {
display: inline-block;
padding: 1em;
}
.nav {
width: 50%;
background: #666;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
padding: 1em;
}
.other {
width: 25%;
background: #999;
}
.other a {
display: inline-block;
padding: 1em;
}
#media (max-width: 640px) {
.logo, .nav, .other {
clear: both;
width: 100%;
}
.nav ul li {
display: block;
}
}
JSFiddle example
I have a vertical Nav menu in html and I'm trying to make a submeu, but it's not going well. When I go to click the submeu it disappears. Any help would be appreciated
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>
You have to change left value from 210px to 200 or even better use margin-left to count value relative to parent.
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
margin-left: 200px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>
hey i was learning how to use the drop down menu with css, but i faced two problems:
The length of my first drop down menu changes, even though i kept playing with their percentages.
I am not able to bring my second drop down menu, i guess i don't know how to call the second drop down menu in css even though i gave it a different class name.
Here is the HTML code just for the drop down menu:
<div class="list">
<ul class="style">
<li class="international">International
<ul class="sub1">
<li class> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="pop">Pop
<ul class="sub1" >
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li class="electronic">Electronic
<ul class="sub1">
<li> Top 10</li>
<li> All
<ul class="sub2">
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</div>
and here is the CSS code:
div ul li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
height: 30px;
text-align: center;
border-bottom:5px;
position: relative;
font-size: 20;
z-index: 1;
margin-top: 2px;
}
.sub1 li {
display: none;
position:relative;
width:100%;
height: 20px;
margin-bottom:-8px;
margin-top:12px ;
float: right;
font-size: 17;
margin-right: 4px;
padding: 2px;
text-align: center;
left:-20px;
}
.sub1 li a {
text-align: left;
margin-right: 15px;
}
.sub2 li {
position: relative;
left: 15px;
top: -30px;
width: 100%;
text-align: left;
margin-top: -3px;
margin-bottom: 4px;
display: none;
float: left;
}
div ul li:hover ul li{
display: block;
position: absolute;
top: 27px;
float: left;
width: 97%;
left: 0px;
height: 23px;
border-top: 5px;
text-align: center;
}
div ul li :hover ul li ul li {
display: block;
position: absolute;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
also any comments on how i did would be appreciated!
Hope you like this..
Just made some changes on your html and css.
HTML:
<div class="nav">
<ul>
<li>International
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Pop
<ul>
<li> Top 10</li>
<li> All</li>
</ul>
</li>
<li>Electronic
<ul>
<li> Top 10</li>
<li> All
<ul>
<li> English</li>
<li> European</li>
<li> International</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav {
margin: 50px auto;
text-align: center;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #C0C0C0;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
background: #4b545f;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block; padding: 10px 20px;
color: #757575; text-decoration: none;
}
.nav ul ul {
background: #5f6975; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
.nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Also Here is the fiddle, Check this working here
I would recommend not using absolute positioning and floats to elements that don't need it..
regarding your second sub, I got it working in this example..
div > ul > li {
display:inline-block;
background-color:#B2B28F;
float:right;
text-align: center;
width: 22%;
position: relative;
z-index: 1;
bottom: 19px;
padding-top: 5px;
font-size: 18px;
padding-bottom: 3px;
font-weight: bold;
font-family: harrington;
margin-right: 12px;
border-bottom:5px;
margin-bottom: 10px;
text-align: center;
margin-top: 2px;
}
div ul li a {
display: block;
text-align: center;
padding:5px 0;
position: relative;
font-size: 20px;
z-index: 1;
color:#212121;
padding-left:10px; box-sizing:border-box;
}
ul { padding:0;}
ul li { list-style:none;}
.sub1 { display:none; width:100%;}
.sub1 li {
position:relative;
width:100%;
clear:both;
font-size: 17px;
text-align: center;
}
.sub1 li a {
text-align: left;
}
.sub2 { display:none; position: relative; background:#B2B28F;}
.sub2 li {
width: 100%;
text-align: left;
margin-bottom: 4px;
padding-left:20px;
box-sizing:border-box;
}
.sub2 li a { font-size:14px;}
div ul li:hover ul li{
width: 100%;
left: 0px;
border-top: 5px solid;
text-align: center;
}
div ul li:hover > ._sub { display:block;}
a:link {
text-decoration: none;
}
a:visited {
color:#520029;
}
a:hover {
color: #293D66;
}
http://jsfiddle.net/2mSzr/
notice I make more specific rules with the '>' option in css, so the styling rules will not
apply to the wrong elements..
Also in the HTML I've added _sub class to all sub menus, and changed the behavior so the display:none/block will be on the actual ul._sub elements and not on their li's.. it just
makes more sense..
go over the example above, let me know if you have any questions.