Question

我正在使用网站的导航栏，目前主菜单已完成。然而，＆＃34;服务＆＃34;和＆＃34;产品＆＃34;按钮需要每个都有自己的子菜单。子菜单通常应隐藏在视图之外，并在用户将鼠标悬停在相应按钮上时显示。

这是一个具有所需结果的fiddle。显然，如果可能的话，我宁愿不使用任何javascript。

我最初的想法是让子菜单的position: absolute值低于主菜单z-index，以便它可以在主菜单下滑动。但是，如果我给它width: 100%这样做会弄乱宽度，因为我的网站是响应式的，所以我避免使用静态宽度。

我也尝试过相对定位，但这也不起作用。

我不喜欢这种方法的另一件事是主菜单和子菜单的标记被拆分。是否有可能获得上述结果，但是使用此标记？

<nav>
    <ul class="nav">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Services</a>
            <ul>
                <li role="presentation"><a href="#">Link 1</a>
                <li role="presentation"><a href="#">Link 2</a>
            </ul>
        </li>
        <li role="presentation"><a href="#">Products</a>
            <ul>
                <li role="presentation"><a href="#">Link 3</a>
                <li role="presentation"><a href="#">Link 4</a>
            </ul>
        </li>
        <li role="presentation"><a href="#">About</a></li>
        <li role="presentation"><a href="#">Contact</a></li>
    </ul>
</nav>

这是我的代码：

CSS

body {
    font-size: 0;
}

.bodyframe {
    display: inline-block;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}

.div_container {
    max-width: 1460px;
    width: 100%;
    display: inline-block;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 49px;
}
.nav {
    display: block;
    position: relative;
    list-style: none;
    background: #304770;
    z-index: 10;
}

.nav li {
    display: inline-block;
    background-color: #304770;
    margin: 0 5px;
}

.nav li a {
    padding: 12px 15px;
    font-size: 18px;
    color: #EFEFEF;
    display: block;
}

.nav li.active a {
    color: orange;
}

.nav li.active a:before {
    width: 100%;
}

.nav li a:hover {
    background-color: #304770;
    color: orange;
    transition: color 0.25s;
}

.nav li a:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background-color: orange;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
}

.nav li:nth-last-of-type(1) a:after {
    display: none;
}

.nav li a:hover:before {
    width: 100%;
}

.nav li a:after {
    content: "";
    display: block;
    position: absolute;
    right: -8px;
    top: 21px;
    height: 6px;
    width: 6px;
    background: #ffffff;
    opacity: .5;
}

.subnav {
    list-style-type: none;
    display: block;
    position: relative;
    top: -49px;
    margin: 0;
    z-index: 1;
    background-color: #ccc;
    -webkit-transition: top 0.2s;
}

.subnav li {
    display: inline-block;
    background-color: #ccc;
    margin: 0 5px;
}

.subnav li a {
    padding: 8px 10px;
    font-size: 14px;
    color: #EFEFEF;
    display: block;
}

HTML

<div class="bodyframe div_container">
    <header>
        <nav>
            <ul class="nav">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Services</a></li>
                <li role="presentation"><a href="#">Products</a></li>
                <li role="presentation"><a href="#">About</a></li>
                <li role="presentation"><a href="#">Contact</a></li>
            </ul>
        </nav>
        <ul class="subnav">
            <li><a href="#">Test</a></li>
            <li><a href="#">1243</a></li>
        </ul>
    </header>
</div>

Answer 1

如果您只需要子菜单模仿示例中的子菜单，而不使用jQuery，则使用您提供的CSS的第二个HTML块可以执行以下操作：

nav:hover~ul {
   top: 0px;
}

这显示了下一个ul元素，在这种情况下是subnav，只要导航器悬停在上面（“〜”选择器意味着选择以nav：hover开头的ul元素）。

但是，如果你想做一些更动态的东西... id建议只使用JS / jQuery

CSS水平子菜单

1 个答案: