Question

我正在寻找关于这个问题的一些建议。

我回过头来修改一个CSS下拉菜单，似乎无法更改子菜单的默认颜色 - 它总是匹配标签的默认红色。

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

这是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;
    }

感谢您的时间。

Answer 1

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

在悬停具有子菜单的项目时，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;}

希望这有帮助。

Answer 2

另一种方法是在子菜单中给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 here

CSS下拉菜单 - 子菜单颜色

2 个答案: