文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的子菜单的宽度不会保持不变？

问为什么我的子菜单的宽度不会保持不变？
EN

Stack Overflow用户

提问于 2019-06-17 01:44:17

回答 1查看 25关注 0票数 1

我似乎不能让我所有的子菜单都和"Meet the Team“菜单一样宽。我曾尝试为ul li li定义min-width和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>

html

css

drop-down-menu

submenu

回答 1

Stack Overflow用户

发布于 2019-06-17 01:57:44

你没有定义链接内部的dropdown宽度，你使用了填充，为了实现这一点，你需要定义下拉链接宽度来匹配父ul，并设置父ul宽度来匹配悬停项目。我修复了你可以在这个链接https://jsfiddle.net/Lhud8yv3/4/上看到它

CSS：

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

此外，我还删除了代码从ul李詈的边距和左位置。也许你可以使用一些类名来定义菜单和下拉菜单，这样你就可以在以后的JS上使用CSS来轻松地访问它们，而不是使用ul李詈a。我建议使用BEM：http://getbem.com/naming/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56621235

复制

相似问题

问为什么我的子菜单的宽度不会保持不变？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的子菜单的宽度不会保持不变？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的子菜单的宽度不会保持不变？
EN