CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matt
Matt

Reputation: 61

Make an <li> element stretch wider than the containing <ul>

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

Upvotes: 4

Views: 3247

Answers (3)

normanthesquid
normanthesquid

Reputation: 700

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.

Upvotes: 3

normanthesquid
normanthesquid

Reputation: 700

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?

Upvotes: 0

DanielBlazquez
DanielBlazquez

Reputation: 1055

Have you tried to position:absolute the children?

Upvotes: 0

Related Questions