css - 将鼠标悬停在 CSS 中的子菜单项上时突出显示父菜单列表项？-6ren

css - 将鼠标悬停在 CSS 中的子菜单项上时突出显示父菜单列表项？

转载作者：太空宇宙更新时间：2023-11-03 18:13:34

我找到了这样的解决方案

li:hover >a 
{
background-color:#ad7272;
}

这是我的 CSS+HTML

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<style type="text/css">
    * {
    margin:0px;
    padding:0px;
}

body {
    background-color:#CC3;
    font-family:Verdana;
    padding:50px;   /*all four paddings are 50px*/
}

h1 {
    text-align:center;
    border-bottom:2px solid #666;
}

ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 {
    list-style-type:none;
    font-size:15px;
}

ul#mainmenu li{
    float:left;
    position:relative;
    width:350px;
    text-align:center;
    margin-right:3px;   /*renders a right margin of 5 pixels around the list       items */
}

ul#mainmenu a {
    text-decoration:none;
    display:block;
    line-height:25px;   /*gives a vertical centering*/
    width:350px;    /*same as the width of the list items*/
    height:25px;
    background-color:#C0DCC0;
    border-radius:5px;
    outline:1px solid red;  /*takes up the space outside of the elements's container     (i.e. in this case the outside of the list items*/
}

ul#mainmenu .sub1 li {
    margin-top:2px;
}

ul#mainmenu .sub1 a {
    border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/
}

ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li {
    margin-left:20px;
}

ul#mainmenu li:hover > a {
    background-color:#ad7272;
}





</style>

<h1>Welcome</h1>
<ul id="mainmenu">
<li><a href="#">Home</a></li>

<li><a href="#">Products</a>
<ul class="sub1">
<li><a href="#">Clothing</a>
<ul class="sub2">
<li><a href="#">T-Shirts</a>
<ul class="sub3">
<li><a href="#">Polo</a></li>
<li><a href="#">V-Neck</a></li>
<li><a href="#">Henley</a></li>
</ul>
</li>
<li><a href="#">Shirts</a>
<ul class="sub4">
<li><a href="#">Half-Sleeve</a></li>
<li><a href="#">Full-Sleeve</a></li>
</ul>
</li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Trousers</a></li>
</ul>
</li>
<li><a href="#">Shoes</a>
<ul class="sub5">
<li><a href="#">Sports-Shoes</a></li>
<li><a href="#">Formal-Shoes</a></li> 
</ul>
</li>
<li><a href="#">Accessories</a></li>
</ul>
</li>

<li><a href="#">Contact Us</a></li>
</ul>

我看不懂这些步骤。它是如何工作的？在最后一个样式部分，我猜它使用的是直接子选择器。但是，为什么当我将鼠标悬停在它上面时，为什么每个子菜单列表项都在改变它的背景颜色？我无法理解这个概念。我想在 CSS 中实现它。请解释如何操作以及操作步骤。

最佳答案

这是您查询的解决方案。

CSS3

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
    *display:inline;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0 0 0 1px;}
ul#css3menu1 ul>li{
    margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
    float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
    text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#cccccc;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#00c4ff;border-style:none;color:#ffffff;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
    text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
    border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast a.pressed{
    text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
    padding:0;}
ul#css3menu1 li.subfirst>a{
    border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst a.pressed{
    border-style:none;}

HTML

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="#" style="height:15px;line-height:15px;">Item 0</a></li>
    <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Item 1</span></a>
    <ul>
        <li class="subfirst"><a href="#">Item 1 0</a></li>
        <li><a href="#">Item 1 1</a></li>
        <li><a href="#">Item 1 2</a></li>
    </ul></li>
    <li class="toplast"><a href="#" style="height:15px;line-height:15px;">Item 2</a></li>
</ul>

你能试试这个吗

关于css - 将鼠标悬停在 CSS 中的子菜单项上时突出显示父菜单列表项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23212757/