Hi Folks,
I have created a horizontal navigation structure built with css - using the unordered list method (ul li etc.).
I need the navigation to go out to a 3rd level. So from the dropdown navigation; I need to create another level of subnavigation - to go out to the side and down (when a link in the dropdown navigation has been rolled over). If that makes sense…
My test page with this navigation can be viewed here: http://www.visionone.org.au/eMagazine/flipbook_april2010/_test_flipbook_page2.htm
I have had a go at some css to use for this, but it’s not working quite right - and I’m keen to go about this the right way.
Here is my css for the navigation:
ul#mainNav { float:left; width:100%; height: 33px; list-style:none; margin: 7px 0px 0px 0px; padding:0px 0px;}
#mainNav li { position:relative; float:left; background: url(../images/2010Design/mainnav_button.png) no-repeat; margin-right: 8px; }
#mainNav li.withsubnav { position:relative; float:left; background: url(../images/2010Design/mainnav_button_withsubnav.png) no-repeat; margin-right: 8px; }
#mainNav li a { float:left; width:107px; text-decoration:none; color:#000000; text-align:center; font: bold 14px/33px "Trebuchet MS"; }
#mainNav li.withsubnav:hover { background: url(../images/2010Design/mainnav_button_withsubnavRO.png); visibility: visible; }
#mainNav li:hover { background: url(../images/2010Design/mainnav_buttonRO.png); visibility: visible; }
#mainNav ul { position: absolute; width:136px; height:100%; padding: 0px; display: none; left:-15px; top:33px; list-style: none; }
#mainNav li li{ float:left; width:136px; height:28px; font-weight:normal; background: url(../images/2010Design/mainnav_subnav.jpg) no-repeat; }
#mainNav li li a{ color: #000000; float: none; height: 28px; padding: 0px; text-align: center; font: bold 11px/28px "Trebuchet MS"; display:block; margin: 0px; width: 100%; }
#mainNav li li:hover { background: url(../images/2010Design/mainnav_subnavRO.jpg) repeat-x;}
#mainNav li:hover ul { margin-left: 0; display: inline-block; }
/* 3RD LEVEL OF NAVIGATION BELOW */
#mainNav li li li{ width:136px; height:28px; font-weight:normal; background: url(../images/2010Design/mainnav_subnav.jpg) no-repeat; display: block; left: 136px;}
#mainNav li li li a{ color: #FF0000; height: 28px; padding: 0px; text-align: center; font: bold 11px/28px "Trebuchet MS"; display:block; margin: 0px; width: 100%; }
#mainNav li li li:hover { background: url(../images/2010Design/mainnav_subnavRO.jpg) repeat-x;}
Any help on this would be much appreciated.
Thanks!
