Question

I’m struggling to position the second level of a dropdown nav menu and was looking for some help please.

The nave itself works fine, it’s just that it displays below the parent, where as I want it to display to the right of it.

For Example, if you were to hover over ‘Home’, you should get ‘Offices’ appear below (works), and when hover over ‘Offices’ you should see a menu with all of the offices, to the right, but it is currently displaying below, obscuring all other options.

/** For the dropdown pages in the menu */
#header-nav li ul.children{
    background: #000000;
    display: block;
    float: none;
    position: absolute;
}
#header-nav li ul.children li{
    float: none;
}
#header-nav li ul.children li a{
    background: #000000;
    display: block;
}
#header-nav li ul.children li a:hover{
    background: #0066b5;
}
/** For the second level dropdown pages in the menu */
#header-nav li ul.children li ul.children{
    background: #000000;
    display: block;
    float: none;
    position: absolute;
}
#header-nav li ul.children li ul.children li{
    float: none;
}
#header-nav li ul.children li ul.children li a{
    background: #000000;
    display: inline;
}
#header-nav li ul.children li ul.children li a:hover{
    background: red;
}

As requested, here is a sample of the HTML from the site –

<li class="page_item page-item-9"><a>Precedents</a>
<ul class='children'>
    <li class="page_item page-item-256"><a href="http://intranet.dynedrewett.com/precedents/agricultrul-precedents/">Agricultrul Precedents</a>
    <ul class='children'>
        <li class="page_item page-item-258"><a href="http://intranet.dynedrewett.com/precedents/agricultrul-precedents/chapter-1-agricultural-partnerships-and-companies/">Chapter 1 &#8211; Agricultural Partnerships and Companies</a></li>
    </ul>
</li>

Answer 1

Looking at your code I’d recommend trying to use the child selector instead of the descendent selector.

Instead of

#header-nav li ul.children li ul.children {

You should consider using

#header-nav > li > ul.children > li > ul.children {

To prevent potential interference.

To get further into the problem it’d be nice if you’d give us some HTML code to work with.

I think I have it figured out for you. The key is to set “ul.children”, “a” and “li” as “display:inline”. See the following code which worked for me, also note the “white-space:nowrap” property:

#header-nav > ul > li > ul.children{
    position: absolute;
}
#header-nav > ul > li > ul.children > li {
    float: none;
}
#header-nav > ul > li > ul.children li > a{
    display: inline;
}

#header-nav > ul > li > ul.children > li > ul.children{
    display: inline;
    position: absolute;
}
#header-nav > ul > li > ul.children > li > ul.children > li {
    white-space:nowrap; /*Prevents words/links from being cut off*/
}
#header-nav > ul > li > ul.children > li > ul.children > li > a {
    display: inline;
}

Tested with the following HTML:

<div id="header-nav">
    <ul>
        <li>
            <a>Home</a>
            <ul class="children">
                <li>
                    <a href="#">Offices</a>
                    <ul class="children">
                        <li><a href="#">Office #1</a></li>
                        <li><a href="#">Office #2</a></li>
                        <li><a href="#">Office #3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>