Question

我似乎无法使我的所有子菜单都具有与“ Meet the Team”菜单相同的宽度。我尝试为min-width定义width和ul li li，但似乎都无法正常工作。在代码上的任何帮助将不胜感激，我也想知道为什么width属性不起作用。

ul {
    list-style: none;
    line-height: 1em;
    text-align: center;
}

li {
    display: inline-block;
    margin-left: 20px;
    position: relative;
    float: center;
    transition-duration: 0.5s;
}

ul li li {
    margin-top: 25px;
    width: 100% !important;
    left:-70px;
}

ul li ul {
    visibility: hidden;
    overflow:hidden;
    opacity: 0;
    position: absolute !important;
    transition: all 0.5s ease;
}

ul li:hover > ul{
    visibility: visible;
    opacity: 1;
}

ul li a {
    background: #414a52;
    color: #FFFFFF;
    padding: 12px 24px;
}

ul li a.active {
    background: #0a304e;
    color: #FFFFFF;
}

ul li a:hover {
    background: #0a304e;
    color: #FFFFFF;
}

<ul>
    <li><a class="active" data-filter="*" href="#">About</a></li>
    <li><a data-filter=".web" href="#">Meet the Team</a>
        <ul>
            <li><a href="#">Officers</a></li>
            <li><a href="#">Consumer</a></li>
            <li><a href="#">FIGs &amp; REITs</a></li>
            <li><a href="#">Healthcare</a></li>
            <li><a href="#">Industrials</a></li>
            <li><a href="#">Technology</a></li>
        </ul>
    </li>
    <li><a data-filter=".photography" href="#">Work Samples</a></li>
    <li><a data-filter=".product" href="#">Connect</a></li>
</ul>

Answer 1

您没有在下拉宽度内定义链接，为此您使用了填充，以实现需要定义下拉链接宽度以匹配父ul并设置父ul宽度来匹配悬停项目。我修复了您可以在此链接https://jsfiddle.net/Lhud8yv3/4/

上看到的问题

CSS：

ul li li a{
   display: inline-block;
   width: 100%;
 }

我也从ul li li删除了保证金和左侧位置的代码。也许您可以使用一些类名来定义菜单和下拉菜单，以便可以稍后在JS上使用CSS轻松地访问它们，而不必使用ul li li a。我建议使用BEM：http://getbem.com/naming/

为什么子菜单的宽度不能保持恒定？

1 个答案: