CSS nested lists width and height

问题

I am trying to get a footer menu styled in CSS using nested lists, since that seems the standard way nowadays most CMSes work with. However I am having a hell of a hard time getting the width and height dynamically expanding to the right sizes. So each top level list item is positioned horizontally, while each child level list item is then listed underneath.

Problem 1: I want the total width of the top level list item to be the width of either the longest child list item or the top list item, whichever is longer. I don't want breaking lines.

Problem 2: The height of the surrounding DIVs is not expanding (tried using both overflow: auto and also the clear: both approach with the :after CSS selector) and scrollbars are displaying instead.

I want to avoid fixing heights because I want to make the menus dynamic.

What do I have to do to solve the above issues? This is what I have so far: (live example)

   <div id="footer">
    <div id="footerstrip" >
        <div id="footercontent" >
            <div id="footerleft">
                <img src="images/LogoGrey.png"  />&nbsp;<a href="#"><img src="images/FooterHome.png" /></a>
            </div>

            <div id="footer-menu-div">
                <ul id="footer-menu">
                   <li>Fashion
                       <ul>
                        <li>Apparel</li>
                        <li>Celebrity Styles</li>
                        <li>Fashion Spotlight</li>
                        <li>Trends</li>
                       </ul>
                   </li>

                   <li>Beauty
                       <ul>
                        <li>Hair</li>
                        <li>Skincare</li>
                        <li>Make-up &amp; Cosmetics</li>
                        <li>Nails</li>
                       </ul>
                   </li>

                   </li>
                   <li>Lifestyle</li>
                   <li>Love</li>
                   <li>Culture</li>
                   <li>Subscribe</li>
                   <li>Events</li> 
                 </ul>
            </div>
        </div>
    </div>

The CSS:

#footer 
{
    margin-top: 30px;
    clear: both;
    width: 100%;
}

#footerstrip
{
    background-color: #F0F0F0;
    width: 100%;
    margin-top: 20px;
    overflow: auto;
}

#footercontent
{
    padding: 10px 0px 10px 0px;
    width: 1100px;
    text-align: left;   
    color: #666666;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    vertical-align:middle;
    margin: auto;
    overflow: auto;
    background-color: #e0e0df;
}

#footercontent a
{
    color: #666666;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:uppercase;   
    text-decoration:none;
    overflow: auto;
}

#footercontent img
{
    vertical-align: middle;
    margin-left: 5px;
}

#footerleft
{
    text-align:right; 
    width: 120px; 
    padding: 0px; 
    margin: 0px; 
    float: left;    
}

#footer-menu-div
{   
    float: left;
    padding: 0px 5px 0px 5px;
    margin: auto;
    text-align: left;
    position: relative;
    display: block;
}

#footer-menu-div:after {
    content:"";
    clear:both;
    display:block;
}

ul#footer-menu
{
    margin: 0px;
    padding: 0px;   
}

ul#footer-menu li
{
    background-color: #c7c6c6;
    color: #212121;
    font-weight: bold;
    font-size: 11px;
    list-style: none;
    display: inline;
    margin: 0px;
    padding: 5px 10px 5px 10px;
    font-family:Arial, Helvetica, sans-serif;
    float: left;
    text-transform: capitalize;
    position: relative;
}

ul#footer-menu li:first-child
{
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;     
}

ul#footer-menu li:last-child
{
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;        
}

ul#footer-menu li ul 
{
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;     
}

ul#footer-menu li ul li
{
    background-color: transparent;
    font-weight: normal;
    display: inline;    
}

UPDATE

I only want that strip with the rounded corners to be around the top level list items, not around all the items. So it will be around one line all horizontally.

UPDATE 2

In actual fact, the contents of each list item will be an <a> link. Based on the feedback so far, I managed to come up with this, however I had to do the <a> with width: 100% in order for the background to continue with the next top level item, and due to this its going out of horizontal space. :(

If there is a way to make the top level item links be as wide as the longest of the child links the issue would be solved.

回答1:

I think both problems should be solved by getting rid of ul#footer-menu li ul { position: absolute; }. This immediately solves the scrolling problem but we still need the list items to display one per line. So, add this: ul#footer-menu li ul li { display: block; float: none; }.

Now the only remaining problem is the background being inconsistent. I think you will need to put the background on the <ul> like so: ul#footer-menu { overflow: hidden; background-color: #C7C6C6; border-radius: 5px; }. Then you can remove background-color and border-radius from the <li> elements.

Here's the finished product in JSFiddle: http://jsfiddle.net/TLRSC/6/

回答2:

OK after lots of trial and error, I managed to get it to look the way I wanted. The rounded background is associated with the anchors of the top level list elements, rather than the list elements themselves. I had to play around with float : left and clear: left settings of both the surrounding div, both ul tags, the li tags and the a tags to get it to work (honestly no idea which combination did the trick exactly).

But anyway here it is working:

http://jsfiddle.net/TLRSC/11/

来源：https://stackoverflow.com/questions/13326663/css-nested-lists-width-and-height

标签

css

footer

nested-lists