Question

在向现有导航添加垂直下拉菜单时寻找一些帮助/指导。

这是我的HTML：

<nav class="menu two-thirds column omega">
<ul>
    <li><a href="#about">About<br /><span>who we are</span></a>

    </li>
    <li><a href="#solutions">Solutions<br /><span>what we do</span></a>

    </li>
    <li><a href="#contact">Contact<br /><span>get in touch</span></a>

    </li>
    <li><a href="#">Support<br /><span></span></a>

    </li>
    <ul>
        <li>link one</li>
        <li>link two</li>
        <li>link three</li>
    </ul>
</ul>

这是我的CSS：

    nav ul {
    float: right;
    height: 61px;
}
nav li {
    list-style: none;
    display: block;
    float: left;
    margin-top: -6px;
    margin-bottom: 0;
}
nav a, nav a:visited, nav a:focus {
    display: block;
    height: 63px;
    padding: 20px 20px 0 20px;
    text-decoration: none;
    color:#666;
    font-weight : 600;
    border-top: 3px solid #000;
    margin-top: 1px;
}
nav a:hover {
    color: red;
    border-top-color: #c1c1c1;
}
nav a.active, nav a.active:focus {
    /*color: #37b1ff;*/
    /*border-top-color: #37b1ff;*/
    color: #ea0101;
    border-top-color: #ea0101;
    -webkit-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    -moz-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    -o-transition:color 0.3s ease, border-top-color 0.3s ease, background-color 0.3s ease;
    transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
nav a.active:hover {
    color: #000;
    /*border-top-color: #37b1ff;*/
    border-top-color: #ea0101;
}
nav a span {
    color: #c1c1c1;
    font-size: 12px;
    font-weight : normal;
}

我想要做的是从“支持”项添加一个简单的垂直下拉菜单。

感谢您的帮助。

Answer 1

将嵌套列表放在支持<li>内，例如：

<nav class="menu two-thirds column omega">
  <ul>
    <li><a href="#">Support<br /><span></span></a>
      <ul>
        <li>link one</li>
        <li>link two</li>
        <li>link three</li>
      </ul>
    </li>
  </ul>
</nav>

然后，您可以使用nav ul li ul { display: none; }隐藏任何嵌套列表，并使用li：hover事件触发显示它们。

添加垂直下拉菜单

1 个答案: