How do I use inherit on min-width in CSS?

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>
            <l开发者_Go百科i><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} 

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.

First of all, you should set your LI display mode to block. In this case, you will be at least able to control width of it.

WEFX

Only "block level" elements will inherit the width of their parents. The "a" element is not inherently a "block" level element.

So, to remedy this, you should either add a "display:block" to the "a" element, or, instead, place the min-width CSS on the li instead of the a.