Question

我正在尝试制作一个次级下拉菜单。我已成功获得第一个菜单，但无论您何时将鼠标悬停在第一个下拉菜单上，第二个菜单都会突出显示。我想要它，以便只有当你鼠标悬停在第一级时才会出现第二级。任何帮助将不胜感激。以下是我的HTML代码：

HTML

<nav>
   <ul>
      <li><a href="#"><span></span> Home </a></li>
      <li>
         <a href="#"><span></span> Jwewlry </a>
         <ul>
            <li>
               <a href="#"><span></span> Rings </a>
               <ul>
                  <li><a href="#">Silver</a></li>
                  <li><a href="#">Copper</a></li>
                  <li><a href="#">Bronze</a></li>
               </ul>
            </li>
            <li><a href="#"><span></span> Pendants </a></li>
            <li><a href="#"><span></span> Bracelets </a></li>
            <li><a href="#"><span></span> Necklaces </a></li>
            <li><a href="#"><span></span> Other </a></li>
         </ul>
      </li>
      <li><a href="#"><span></span> Testimonials </a></li>
      <li><a href="#"><span></span> Latest Offers </a></li>
      <li><a href="#"><span></span> News </a></li>
      <li><a href="#"><span></span> Contact Us </a></li>
   </ul>
</nav>

CSS

nav {
        /* Repeating background image */
    background: url(texture.png);
    width: 210px;
    margin: 20px;
}

nav ul {
        /* Remove bullet points */
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
        /* Any child positioned absolutely will be positioned relative to this */
    position: relative;
}

nav ul li ul li ul li {
    position: block;
}

nav a {
    color: #e8e8e8;
    padding: 12px 0px;
        /* Fill all available horizontal space */
    display: block;
        /* Remove underline */
    text-decoration: none;
        /* New CSS3 animations: apply transition to background property, taking 1s to change it */
    transition: background 1s;
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    font-family: tahoma;
    font-size: 13px;
    text-transform: uppercase;
    padding-left: 20px;
}

nav a:hover {
        /* RGBA background for transparancy: last number(0.05) is the transparency */
    background: RGBA(255,255,255,0.05);
    color: #fff;
}

nav ul li:hover ul {
        /* When list item is hovered, display UL nested within. */
    display: block;
}

nav ul ul {
        /* Remove element from document flow */
    position: absolute;
        /* Position relative to its parent &lt;li&gt; */
    left: 210px;
    top: 0;
    border-top: 1px solid #e9e9e9;
    display: none;
}

nav ul ul li {
    width: 200px;
    background: #f1f1f1;
    border: 1px solid #e9e9e9;
    border-top: 0;
}

nav ul ul li a {
    color: #a8a8a8;
    font-size: 12px;
    text-transform: none;
}

nav ul ul li a:hover {
    color: #929292;
}

nav span {
    width: 12px;
    height: 12px;
    background: #fff;
    display: inline-block;
    float: left;
    margin-top: 3px;
    margin-right: 20px;
    position: relative;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

nav a:hover span {
    background: #7d2c41;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

/* Horizontal line */
nav span:before {
    content: "";
    width: 12px;
    height: 2px;
    background: #3a3b3b;
    position: absolute;
    left: 0px;
    top: 5px;
}

/* Vertical line */

nav span:after {
    content: "";
    width: 2px;
    height: 12px;
    background: #3a3b3b;
    position: absolute;
    left: 5px;
    position: top;
}

Answer 1

只需将悬停选择器更改为：

nav ul li:hover > ul

这样只有第一个子ul元素可见。

CSS和HTML编码

1 个答案: