# Horizontal navigation needs a 3rd level

**URL:** <https://forum.kirupa.com/t/horizontal-navigation-needs-a-3rd-level/311210>\
**Category:** web dev\
**Created:** [June 30, 2010, 6:49am UTC](https://forum.kirupa.com/t/horizontal-navigation-needs-a-3rd-level/311210 "2010-06-30T06:49:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![agent\_99](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@agent\_99](https://forum.kirupa.com/u/agent_99)\
**Post date:** [June 30, 2010, 6:49am UTC](https://forum.kirupa.com/t/horizontal-navigation-needs-a-3rd-level/311210/1 "2010-06-30T06:49:51Z")

</div>

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](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:

```auto
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!