CSS 下拉菜单 - 子菜单颜色 [英] CSS Drop Down – Sub Menu Color

问题描述

我正在寻求有关此问题的建议.

I'm looking for some advice on this issue.

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

I went through a tutorial a while back to build a CSS drop down menu and can't seem to change the default color of the sub menus – it always matches the default red color for the a tag.

我已经为此纠结了一段时间，似乎找不到解决方案.有人可以帮我解决这个问题吗?

I've been messing around with this for a while now and can't seem to find a solution. Can someone help me out with this please?

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

感谢您的时间.

推荐答案

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

From the above code for changing the color of submenus, you have not targeted the child elements of the main menus. For that you need to target them and add new rules to specifically target that element and change the color. Here is the solution.

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

On hover of the items with submenus, the color change for instance here green color on display of the submenus.

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

例如，在子菜单悬停时，颜色从 green 更改为 yellow.

On hover of the submenus, change of color from green to yellow for instance.

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

希望这会有所帮助.

这篇关于CSS 下拉菜单 - 子菜单颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！