Question

This seems really simple, but I can’t get the syntax correct w/ the following scenario. I have some dropdown menus defined for the top of a screen. I want the list-items (each LI) to be AT LEAST as wide as its parent LI. It seems like an easy job for min-width and inherit, but I haven’t been able to get it to work properly.

Right now, the “inherit” word just gets underlined in VS as if it’s not recognized. The page will build/load fine, but it’s clearly not reading the argument, as the LI controls aren’t as wide as their parent LI’s. Any help is appreciated.

Here is part of my HTML:

<ul id="javascriptDDM">
    <li><a href="#"> MAIN OPTION 1 </a>
        <ul>
            <li><a href="../somePage.aspx?type=1"> Choice 1 </a></li>
            <li><a href="../somePage.aspx?type=2"> Choice 2 </a></li>
            <li><a href="../somePage.aspx?type=3"> Choice 3 </a></li>
        </ul>
    </li>
    <li><a href="../mainPage.aspx"> MAIN OPTION 2 </a>
        <ul>
            <li><a href="../somePage.aspx?type=1"> Choice 1 </a></li>
            <li><a href="../somePage.aspx?type=2"> Choice 2 </a></li>
            <li><a href="../somePage.aspx?type=3"> Choice 3 </a></li>
        </ul>
    </li>
</ul>

… EDIT – here is ALL of the javascriptDDM CSS:

#javascriptDDM { width: auto; margin: 0; padding: 0 }    
    #javascriptDDM li { width: auto; float: left; list-style: none }
    #javascriptDDM li a { display: block; background: #606668; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; border-top: none; color: White; white-space: nowrap; background-position:left center; }
    #javascriptDDM li a:hover { background: #999999; color: #FFFFFF; }
        #javascriptDDM li ul { width: auto;    margin: 0; padding: 0; position: absolute;    visibility: hidden; z-index: 1000 }        
        #javascriptDDM li ul li { min-width: inherit; float: none;    display: inline }        
        #javascriptDDM li ul li a{ color: #FFFFFF;background: #999999 }        
        #javascriptDDM li ul li a:hover { color: #000000; background: #FFFFFF} 

Answer 1

Inherit will make the min-width property take the same “specified” value as the parent’s min-width property. If you don’t set min-width on a parent element, it won’t have any value.