3

我正在就这个问题寻求一些建议。

不久前，我通过教程构建了一个 CSS 下拉菜单，但似乎无法更改子菜单的默认颜色——它始终与 a 标签的默认红色匹配。

我已经搞砸了一段时间，似乎无法找到解决方案。有人可以帮我解决这个问题吗？

这是html：

  <nav>
      <ul>
         <li><a class="selected" href="index.html">Home</a></li>
         <li><a href="clothing.html">Clothing</a></li>
         <li><a href="gear.html">Gear</a></li>
         <li><a href="brand.html">Brand</a>
             <ul>
                 <li><a href="#">XXXXXX</a></li>
                 <li><a href="#">XXXXXX</a></li>
             </ul>
         </li>
         <li><a href="fighter.html">Fighters</a>
             <ul>
                 <li><a href="#">XXXXXX</a></li>
                 <li><a href="#">XXXXXX</a></li>
             </ul>
         </li>
         <li><a href="account.html">My Account</a></li>
      </ul>
   </nav>

这是CSS：

   nav {
        position:relative;
        float:right;
        font-size:14px;
        margin-top:35px;
        font-weight:bold;
        padding-right:178px;
        z-index:4;
    }
    nav ul ul {
        display:none; /* hide sub menus */
    }
    nav ul li:hover > ul {
        display:block; /* show sub menus on hover */
    }
    nav ul {
        float:right;
        font-size:14px;
        margin-top:-3px;
        text-transform:uppercase;
        list-style:none;
        position:relative; /* position sub menu according to nav */
        display:inline-table; /* condense with of sub menu to fit */
    }
    nav ul:after {
        content:"";
        clear:both;
        display:block; /* clear floats on other list items */
    }
    nav ul li {
        float:left;
    }
    nav ul li:hover a {
        color:#ee1f3b;
        text-decoration:none;
        -webkit-transition-property:color; 
        -webkit-transition-duration:0.2s, 0.2s; 
        -webkit-transition-timing-function:linear, ease-in;
        -moz-transition-property:color; 
        -moz-transition-duration:0.2s, 0.2s; 
        -moz-transition-timing-function:linear, ease-in;
    }
    nav ul li a {
        padding:4px 11px;
        text-decoration:none;
        color:#000000;
        display:block;
        text-decoration:none;
    }
    nav ul ul {
        background:#cacaca;
        position:absolute;
        top:25px; /* sub position */
    }
    nav ul ul li {
        float:none; 
        border-bottom:1px solid rgba(0, 0, 0, 0.2);
        position:relative;
    }
    nav ul ul li:last-child {
        border-bottom:1px solid rgba(0, 0, 0, 0.2);
    }
    .selected {
        color:#ee1f3b;
    }   
    nav ul ul li a:hover {
        color:#000000;
    }

谢谢你的时间。

4

2 回答 2

1

从上面更改子菜单颜色的代码中，您没有针对主菜单的子元素。为此，您需要定位它们并添加新规则以专门针对该元素并更改颜色。这是解决方案。

在带有子菜单的项目上悬停时，color例如此处的更改green颜色会显示子菜单。

nav ul li:hover ul li a{color:green;}

例如，在子菜单悬停时，颜色从green变为yellow。

nav ul li:hover ul li a:hover{color:yellow;}

为了详细说明这一点，

的HTML：

   <nav>
    <ul>
        <li><a class="selected" href="index.html">Home</a></li>
        <li><a href="clothing.html">Clothing</a></li>
        <li><a href="gear.html">Gear</a></li>
        <li><a href="brand.html">Brand</a>
            <ul>
                <li><a href="#">XXXXXX</a></li>
                <li><a href="#">XXXXXX</a></li>
            </ul>
        </li>
        <li><a href="fighter.html">Fighters</a>
            <ul>
                <li><a href="#">XXXXXX</a></li>
                <li><a href="#">XXXXXX</a></li>
            </ul>
        </li>
        <li><a href="account.html">My Account</a></li>
    </ul>
</nav>

CSS：

    nav {
    position:relative;
    float:right;
    font-size:14px;
    margin-top:35px;
    font-weight:bold;
    padding-right:178px;
    z-index:4;
}
nav ul ul {
    display:none; /* hide sub menus */
}
nav ul li:hover > ul {
    display:block; /* show sub menus on hover */
}
nav ul {
    float:right;
    font-size:14px;
    margin-top:-3px;
    text-transform:uppercase;
    list-style:none;
    position:relative; /* position sub menu according to nav */
    display:inline-table; /* condense with of sub menu to fit */
}
nav ul:after {
    content:"";
    clear:both;
    display:block; /* clear floats on other list items */
}
nav ul li {
    float:left;
}
nav ul li:hover a {
    color:#ee1f3b;
    text-decoration:none;
    -webkit-transition-property:color; 
    -webkit-transition-duration:0.2s, 0.2s; 
    -webkit-transition-timing-function:linear, ease-in;
    -moz-transition-property:color; 
    -moz-transition-duration:0.2s, 0.2s; 
    -moz-transition-timing-function:linear, ease-in;
}
nav ul li a {
    padding:4px 11px;
    text-decoration:none;
    color:#000000;
    display:block;
    text-decoration:none;
}
nav ul ul {
    background:#cacaca;
    position:absolute;
    top:25px; /* sub position */
}
nav ul ul li {
    float:none; 
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
    position:relative;
}
nav ul ul li:last-child {
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
.selected {
    color:#ee1f3b;
}   
nav ul ul li a:hover {
    color:#000000;
}

nav ul li:hover ul li a{color:green;}
nav ul li:hover ul li a:hover{color:yellow;}

希望这可以帮助。

于 2013-05-20T07:08:16.830 回答
0

另一种方法是在子菜单中给 ul 一个 id，如下所示 

 <li><a href="brand.html">Brand</a>
  <ul id="submenu">
    <li><a href="#">AAAAAA</a></li>
    <li><a href="#">BBBBBB</a></li>
  </ul>
 </li>

CSS

#submenu li a
{
    color:green;    
}

在此处查看完整的 Jsfiddle

于 2013-05-20T07:23:24.313 回答