4

At the moment, I'm developing a layout for work, and I'm just a tiny bit stuck with a dynamic drop down menu. I'm using a child 'ul' within an 'li' element that will display the children of the navigation links - but the 'li' above (so the main one, that you hover on to view the children), stretches to the length of the 'ul', which is, of course, defined by the width of the 'li' elements inside that.

Also, I'm using jQuery to display the child items when the user hovers over the parent navigation item.

However, I need this not to happen! Here's a screenshot link: http://d.pr/v5Wk (I'm sorry - I'm not registered, so I can't post images! D: )

Basically, I need to get rid of the gap on the right of 'Section One', dynamically, without defining any preset widths.

Here's the HTML:

<div class="menu">
    <ul class="navigation">
        <li>
            <a href="#" onclick="return false;">Section One</a>
            <ul class="children">
                <li>
                    <a href="#" onclick="return false;">Child Item One</a>              
                </li>
                <li>
                    <a href="#" onclick="return false;">Test</a>
                </li>
                <li>
                    <a href="#" onclick="return false;">Test</a>
                </li>
                <li>
                    <a href="#" onclick="return false;">Test</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Two</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Three</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Four</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Five</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Section Six</a>
        </li>
    </ul>
</div>

And here's the CSS:

.menu { width: 100%; overflow: hidden; display: block; position: absolute; margin: 75px auto; background: #666 url('../image/stripe.png'); }

ul.navigation { list-style-type: none; width: 900px; margin: 0 auto; }

ul.navigation li a { color: #fff; text-decoration: none; display: block; padding: 10px; }

ul.navigation li a:hover { color: #fff; background: #444 url('../image/stripe_active.png');}

ul.navigation li { float: left; }


ul.navigation li ul.children { list-style-type: none; display: block; overflow: hidden; position: relative; z-index: 1; }

ul.navigation li ul.children li { color: #fff; float: left; font-size: 11px; white-space: nowrap; }

Any help on this would be great!

Many thanks, Matt

Matt
  • 61
  • 1
  • 8
  • but what about the child nodes? what width should "child item one" and "test", "test", and "test" be? Or is this supposed to be tagged "javascript" or "jquery"? – Joseph Marikle Aug 01 '11 at 13:51
  • Yes, it's jQuery based as well - I'm sorry I forgot to mention that. The child elements shouldn't have a set width - they are defined by how long the text is. – Matt Aug 01 '11 at 13:58

3 Answers3

3
ul.navigation li ul.children {
list-style-type: none;
display: block;
overflow: hidden;
position: absolute;
z-index: 1;
top: 2em;
left: auto;
right: auto;
}

If you still can't see them, add height: 5em to ul.navigation

Position:Absolute causes an element to be rendered at a specific spot on the page, taking it out of the normal flow. Since it is no longer being rendered inside the topnav li, it doesn't cause it's width to be too large.

normanthesquid
  • 690
  • 1
  • 6
  • 21
  • What do you mean "if I still can't see them"? – Matt Aug 01 '11 at 14:33
  • On my little test thing, setting them to absolute caused the navigation pane to hide them. I forgot that you weren't looking over my shoulder. If the first part works, you can ignore the navigation height thing. If you add it and can't see the submenu at all, try setting the height of navigation – normanthesquid Aug 01 '11 at 14:36
  • I get it I get it XD Yes this is the correct answer. The problem is your children ul element is "in flow". It needs to be taken "out of flow". This is a convenient side effect of position:absolute. You would normally use this to position the element at one fixed location on the page, but if you don't specify where it goes, it just stays where it was at before positioning. Thus you get an element that takes no space on the page but is positioned as if it did. example: http://jsfiddle.net/C3U8n/ **+1** btw – Joseph Marikle Aug 01 '11 at 14:36
0

Have you tried to position:absolute the children?

DanielBlazquez
  • 1,045
  • 1
  • 13
  • 22
  • I don't understand. What would 'position: absolute;' do? I just need something to get rid of the whitespace on the right of 'Section One' - thank you for the contribution! – Matt Aug 01 '11 at 14:17
  • I think the suboptions ("children item one", "test", "test"...) are making wider the box of "Section One". If you position this item absolutly and take them out from the normal flow, the box will be smaller. – DanielBlazquez Aug 11 '11 at 15:54
0

Does it need to be an ul/li solution? wouldn't it be easier to update the contents of the submenu with javascript when you hover over the top nav?

normanthesquid
  • 690
  • 1
  • 6
  • 21
  • I'm working with a platform called OpenCart, so I can't really rely on JS to update it, as it uses PHP to display the navigation and children. – Matt Aug 01 '11 at 14:19