I want to make a 3-4 level nav bar says like below:
So basically i got the main nav and 3 levels of sub items. When you hover one of the main item the next level row shows up. And if you land on the sub item page all the parent items needs to show up.Any though?HTML:\[code\]<ul class="menu12"><li class="selected iFOL12 first"><a href="http://stackoverflow.com/questions/14065707/siteurl/Home"><span>Home</span></a></li><li class="iFOL149"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon"><span>Hillingdon</span></a><ul><li class="iFOL163 first"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon/Prep"><span>Prep</span></a></li><li class="iFOL164"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon/Kindergarten"><span>Kindergarten</span></a></li><li class="iFOL165"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon/Year-1"><span>Year 1</span></a></li><li class="iFOL166"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon/Year-2"><span>Year 2</span></a></li><li class="iFOL167"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon/Sport"><span>Sport</span></a></li><li class="iFOL168"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon/Music"><span>Music</span></a></li><li class="iFOL169 last"><a href="http://stackoverflow.com/questions/14065707/siteurl/Hillingdon/Hillingdon-Blog/blog.aspx"><span>Hillingdon Blog</span></a></li></ul></li><li class="iFOL152"><a href="http://stackoverflow.com/questions/14065707/siteurl/Teaching"><span>Teaching</span></a></li><li class="iFOL153"><a href="http://stackoverflow.com/questions/14065707/siteurl/Administration"><span>Administration</span></a></li><li class="iFOL154"><a href="http://stackoverflow.com/questions/14065707/siteurl/IT"><span>IT</span></a></li><li class="iFOL155"><a href="http://stackoverflow.com/questions/14065707/siteurl/Policies"><span>Policies</span></a></li><li class="iFOL156"><a href="http://stackoverflow.com/questions/14065707/siteurl/Library"><span>Library</span></a></li><li class="iFOL157 last"><a href="http://stackoverflow.com/questions/14065707/siteurl/Tuck-Shop"><span>Tuck Shop</span></a></li></ul>\[/code\]CSS:\[code\]ul.menu12 {position:relative;}ul.menu12, ul.menu12 ul {margin: 0;padding: 0;list-style: none;}ul.menu12 {width:100%;margin:auto;position: relative;}ul.menu12 li {float: left;width:98px;height:30px;line-height:30px;}.menu12 li ul {position: absolute;left: 0;top:30px;margin-left:-999em;width:100%;}.menu12 li ul ul {position: absolute;left:0;bottom: 30px;}/* Styles for Menu Items */ul.menu12 li a {display:block;text-decoration: none;color: #000;height:30px;line-height:30px;width:98px;text-align:center;background:url(images/egrave.jpg) no-repeat 0 0;}ul.menu12 li li {clear:none}/* this sets all hovered lists to red and current item */.menu12 li.selected a, .menu12 li:hover a, .menu12 li.over a, .menu12 li:hover li:hover a, .menu12 li.over li.over a, .menu12 li:hover li:hover li:hover a, .menu12 li.over li.over li.over a, .menu12 li:hover li a:hover, .menu12 li.over li a:hover, .menu12 li:hover li:hover li:hover a:hover, .menu12 li.over li li a:hover, .menu12 li:hover li:hover li:hover li:hover a:hover, .menu12 li.over li.over li.over li.over a:hover {color: red;background-position:0 -30px}/* set dropdown to default */.menu12 li:hover li a, .menu12 li.over li a, .menu12 li:hover li:hover li a, .menu12 li.over li.over li a, .menu12 li:hover li:hover li:hover li a, .menu12 li.over li.over li.over li a {color: #000;background-position:0 0;}ul.menu12 li:hover ul ul, ul.menu12 li:hover ul ul ul, ul.menu12 li.over ul ul, ul.menu12 li.over ul ul ul {margin-left:-999em}ul.menu12 li:hover ul, ul.menu12 li li:hover ul, ul.menu12 li li li:hover ul, ul.menu12 li.over ul, ul.menu12 li li.over ul, ul.menu12 li li li.over ul {margin-left:0;}\[/code\]Happy new year guys.