html-lists - 如何在 CSS 中使用 inherit on min-width？

Question

这看起来很简单，但在以下情况下我无法获得正确的语法。我为屏幕顶部定义了一些下拉菜单。我希望列表项(每个 LI)至少与其父 LI 一样宽。对于 min-width 和 inherit 来说，这似乎是一件容易的事，但我无法让它正常工作。

现在，“继承”一词在 VS 中只是带有下划线，就好像它没有被识别一样。该页面将构建/加载正常，但它显然没有读取参数，因为 LI 控件不如它们的父 LI 控件那么宽。感谢您的帮助。

这是我的 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>

... 编辑 - 这里是所有的 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 将使 min-width 属性采用与父级的 min-width 属性相同的“指定”值。如果您不在父元素上设置 min-width，它将没有任何值。