Question

The following JS Fiddle demonstrates my problem: http://jsfiddle.net/pUBuq/

When hovering over the menu, I wish for the menu to display like this:

Header A    Header B
--------    ---------
Link 1A     Link 1B
Link 2A     Link 2B

In stead it displays like this:

Header A
Header B
Link 1A
Link 2A
Link 1B
Link 2B

Here’s the markup:

<ul id="site-nav">  
    <li>
        <a class="menu" href="#">Menu 1</a>
        <div class="site-nav-menu">
            <nav>
                <h3>Header A</h3>
                <h3>Header B</h3>
                <ul>
                    <li><a href="#">Link 1a</a></li>
                    <li><a href="#">Link 2a</a></li>
                </ul>
                <ul>
                    <li><a href="#">Link 1b</a></li>
                    <li><a href="#">Link 2b</a></li>
                </ul>
            </nav>
        </div>
    </li>  
</ul> 

I’ve tried to float the <h3> headers and give them the same width as the link elements but nothing seems to float. The CSS is a bit long and probably best viewed in the fiddle: http://jsfiddle.net/pUBuq/

I’ve been testing this in FF7 and would greatly appreciate any help figuring out where I’m going wrong.

Answer 1

putting the h3 in the uls reads a little cleaner if just reading the markup (like how search crawlers view a site).

jsfiddle example

to format the header/links next to each other horizontally set the width on the nav element (width:484px used in the js fiddle above fit the two menu lists perfectly)

in your example the a and h3 are set to 220px but the nav has an auto width and it’s parent div is positioned absolutely (meaning it’ll only go as wide as its content unless the width is set).