HTML5和CSS3导航栏悬停

Question

各位，我还是HTML5和CSS3的初学者

我希望有这样的效果。我试了很多次，但都没有成功。main

• 虽然鼠标移动到它的孩子身上，但仍然保持着颜色。

CSS代码应该看起来像？

HTML 5代码按要求。

这里是CSS3

/* JS禁用样式*/ ..no js nav li:悬停ul {显示；} /*基导航样式*/导航{边距:0自动20 ul；位置:相对；背景颜色：#FFFFFF；字体:16 ul，Sans-serif；} /*Temporaly解决方案*/ nav ul a{边框-底部:瘦；边界-底部样式:固态；边界-底色:透明；} /*Solution结束*/ nav ul {填充:0；} nav li {位置:相对；浮点数:左；列表样式类型:无；} nav ul :在{content：“.”之后；显示:块；高度:0；清除:两者；可见性:隐藏；} nav a:悬停{颜色：#F90；{显示:块；填充:10 li 20 li；颜色：#333；文本-装饰:无；字体-权重: 600；} nav li a:焦点{大纲:无；文本-装饰:下划线；} nav :先子{边框-左:无；} nav li.last a{边框-右:无；} nav {显示:块；}浮动:右；边距-左:5 5px；} nav ul {显示:无；宽度:110%；位置:绝对；左:0；background:#FFFFFF；} nav ul ul li {浮动:无；} nav ul a{填充:5 5px 10 5px；边框-左:无；边框-右:无；字体大小:14 5px；} /* CSS3 */ .cssgradients nav li:悬停{背景-图像：-moz-线性梯度( 0% 100 4px 90 left，#999，#222)；背景图像：-webkit-梯度(线性，0% 0%，0% 100%，从(#222)到(#555))；} .borderradius nav ul ul {-莫兹-边界-半径-左下角:4PX；-moz-边界-半径-右下角:4PX；-webkit-边界-底部-左-半径:4PX；-webkit--边界框影:2PX2PX2PXRGBA(0，0，0，.8)；} .rgba nav ul ul li {边框-左:1 2px实心rgba(0,0,0,0.1)；边框-右:1 2px实心rgba(0,0,0,0.1)；} .rgba导航ul a:悬停{背景颜色: rgba(255,255,255,0.9)；} .borderradius.rgba nav ul li.last {边框-左:1 2px实心rgba(0,0,0,0.1)；边界-底部:1px实心rgba(0，0，0.1)；-moz-边界-半径-左下角:4px；-moz-边界-半径-右下角:4px；-webkit-边界-下-左-半径:4px；-webkit-边界-下-右-半径:4px；边界-下-右半径:4px；边界-下-右半径:4px；} .csstransforms ul a span {.csstransforms}

Answer 1

您需要将:hover伪类分配给父li标记。

nav ul li:hover > a 
{ 
    color: #F90; 
}

Answer 2

试试这个：

/* JS disabled styles */
.no-js nav li:hover ul 
{ 
    display:block; 
}

/* base nav styles */
nav 
{
    margin: 0 auto 20px;
    position: relative;
    background-color: #FFFFFF;
    font: 16px Tahoma, Sans-serif;
}

/*Temporaly Solution*/
nav ul a 
{ 
   border-bottom: thin; 
   border-bottom-style: solid;      
   border-bottom-color: transparent;
}
/*Solution Ended*/

nav ul 
{ 
    padding:0; 
    margin:0; 
}

nav li 
{ 
    position:relative; 
    float:left; 
    list-style-type:none; 
}

nav ul:after 
{ 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
}

nav ul a:hover, nav ul > li:hover > a 
{ 
    color: #F90; 
}

nav li a 
{
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

nav li a:focus 
{ 
    outline:none; 
    text-decoration:underline; 
}

nav li:first-child a 
{ 
    border-left:none; 
}

nav li.last a 
{ 
    border-right:none; 
}

nav a span 
{ 
    display:block; 
    float:right; 
    margin-left:5px; 
}

nav ul ul 
{ 
    display:none; 
    width:110%; 
    position:absolute; 
    left:0; 
    background:#FFFFFF; 
}

nav ul ul li 
{ 
    float:none; 
}

nav ul ul a 
{ 
    padding:5px 10px; 
    border-left:none; 
    border-right:none; 
    font-size:14px; 
}

/* CSS3 */

    .cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); }
    .borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
    .boxshadow.rgba nav ul ul {
        background-color: rgba(255,255,255,0.8);
        -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.8);
        -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.8);
        box-shadow: 2px 2px 2px rgba(0,0,0,.8);
    }
    .rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
    .rgba nav ul ul a:hover {
        background-color: rgba(255,255,255,0.9);
    }
    .borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
    .csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }

希望能成功。

Answer 3

这将为所有链接元素添加颜色。仅向第一个链接元素添加替换：

nav ul a:hover 
{ 
    color: #F90; 
}

通过

nav ul a:hover, nav ul > li:hover > a 
{ 
    color: #F90; 
}

这条路很管用。已经在本地试过了。