我正在尝试将菜单的所有方面的css分开，因为它影响了悬停时的子菜单。我错过了什么？每当我将鼠标放在子菜单上时，我都会获得背景颜色并且图片正在被更改。如何在不影响效果的情况下将顶部菜单和子菜单的css分开？
如何在悬停时分离主力悬停的css效果和ul li ul li a？或者至少使它对主li的影响不影响悬停时的子菜单li？
nav#menu{
border: 1px solid yellow;
width:100%;
height:px;
position: relative;
top:50px;
background-color:blue;
}
.js nav[role=navigation] {
width:100%;
height:px;
margin: 0 auto;
}
nav[role=navigation] ul {
margin: 0 0 0 -0.25em;
border: 0;
}
nav[role=navigation] li {
padding:5px;
position: relative;
display: inline-block;
margin: 0 0.10em;
}
nav#menu li > a:hover{
padding:5px;
border-radius: 5px 5px 5px 5px;
background-color:#666;
color:#A10115;
}
nav[role=navigation] li a {
border:0;
text-decoration: none;
color:#F0EFEA;
font-size:1.5em;
}
ul li ul.dropdown{
min-width:800px; /* Set width of the dropdown */
background-color:#666;
padding:10px;
display: none;
position:absolute;
z-index: 999;
left: -40px;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
border: 3px solid red;
}
ul li ul.dropdown li a{
background-color:yellow;
}
#lilab{
background-color: yellow;
width:100%;
height:20px;
}
#liinfo{
text-align: center;
font-size:10px; line-height: 1.5;
}
li#central{
text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
li#north{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
li#east{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
li#west{text-align: center;
height:100px;
width:100px;
background-color:red;
background-repeat: no-repeat;
background-size: cover;
}
li#south{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
<nav id="menu" role="navigation">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="index.html">Locations</a>
<ul class="dropdown">
<li id="central"><a href="#"><div id="lilab">Central</div><div id="liinfo">adress 1</div></a></li>
<li id="north"><a href="#"><div id="lilab">North</div><div id="liinfo">adress 2</div></a></li>
<li id="east"><a href="#"><div id="lilab">East</div><div id="liinfo">adress 3</div></a></li>
<li id="west"><a href="#"><div id="lilab">West</div><div id="liinfo">adress 4</div></a></li>
<li id="south"><a href="#"><div id="lilab">South</div><div id="liinfo">adress 5</div></a></li>
</ul>
</li>
<li><a href="index.html">Contacts</a></li>
<li><a href="index.html">Services</a>
<ul class="dropdown">
<li id="central"><a href="#"><div id="lilab">Central</div><div id="liinfo">
address5</div></a></li>
<li id="north"><a href="#"><div id="lilab">North</div><div id="liinfo">
address4</div></a></li>
<li id="east"><a href="#"><div id="lilab">East</div><div id="liinfo">
address3</div></a></li>
<li id="west"><a href="#"><div id="lilab">West</div><div id="liinfo">
address2</div></a></li>
<li id="south"><a href="#"><div id="lilab">South</div><div id="liinfo">
address1</div></a></li>
</ul>
</li>
<li><a href="index.html">Media</a></li>
<li><a href="index.html">Partners</a></li>
<li><a href="index.html">Things to Know</a></li>
</ul>
</nav>
答案 0 :(得分：0)
这有一个简单的解决方案。 nav#menu li > a:hover正在选择nav#menu中的所有li元素。您所要做的就是在>和nav#menu之间添加li，如此nav#menu > li > a:hover。 >表示它是直接的孩子。所以孙子女不会被包括在内。这是一篇关于儿童和兄弟选择者child/sibling selectors的好文章。
nav#menu{
border: 1px solid yellow;
width:100%;
height:px;
position: relative;
top:50px;
background-color:blue;
}
.js nav[role=navigation] {
width:100%;
height:px;
margin: 0 auto;
}
nav[role=navigation] ul {
margin: 0 0 0 -0.25em;
border: 0;
}
nav[role=navigation] li {
padding:5px;
position: relative;
display: inline-block;
margin: 0 0.10em;
}
nav#menu > li > a:hover{
padding:5px;
border-radius: 5px 5px 5px 5px;
background-color:#666;
color:#A10115;
}
nav[role=navigation] li a {
border:0;
text-decoration: none;
color:#F0EFEA;
font-size:1.5em;
}
ul li ul.dropdown{
min-width:800px; /* Set width of the dropdown */
background-color:#666;
padding:10px;
display: none;
position:absolute;
z-index: 999;
left: -40px;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
border: 3px solid red;
}
ul li ul.dropdown li a{
background-color:yellow;
}
#lilab{
background-color: yellow;
width:100%;
height:20px;
}
#liinfo{
text-align: center;
font-size:10px; line-height: 1.5;
}
li#central{
text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
li#north{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
li#east{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
li#west{text-align: center;
height:100px;
width:100px;
background-color:red;
background-repeat: no-repeat;
background-size: cover;
}
li#south{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
<nav id="menu" role="navigation">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="index.html">Locations</a>
<ul class="dropdown">
<li id="central"><a href="#"><div id="lilab">Central</div><div id="liinfo">adress 1</div></a></li>
<li id="north"><a href="#"><div id="lilab">North</div><div id="liinfo">adress 2</div></a></li>
<li id="east"><a href="#"><div id="lilab">East</div><div id="liinfo">adress 3</div></a></li>
<li id="west"><a href="#"><div id="lilab">West</div><div id="liinfo">adress 4</div></a></li>
<li id="south"><a href="#"><div id="lilab">South</div><div id="liinfo">adress 5</div></a></li>
</ul>
</li>
<li><a href="index.html">Contacts</a></li>
<li><a href="index.html">Services</a>
<ul class="dropdown">
<li id="central"><a href="#"><div id="lilab">Central</div><div id="liinfo">
address5</div></a></li>
<li id="north"><a href="#"><div id="lilab">North</div><div id="liinfo">
address4</div></a></li>
<li id="east"><a href="#"><div id="lilab">East</div><div id="liinfo">
address3</div></a></li>
<li id="west"><a href="#"><div id="lilab">West</div><div id="liinfo">
address2</div></a></li>
<li id="south"><a href="#"><div id="lilab">South</div><div id="liinfo">
address1</div></a></li>
</ul>
</li>
<li><a href="index.html">Media</a></li>
<li><a href="index.html">Partners</a></li>
<li><a href="index.html">Things to Know</a></li>
</ul>
</nav>
答案 1 :(得分：0)
试试此代码
nav#menu{
width:100%;
height:px;
position: relative;
top:50px;
background-color:blue;
}
.js nav[role=navigation] {
width:100%;
height:px;
margin: 0 auto;
}
nav[role=navigation] ul {
margin: 0 0 0 -0.25em;
border: 0;
}
nav[role=navigation] li {
padding:5px;
position: relative;
display: inline-block;
margin: 0 0.10em;
}
nav#menu li > a{
padding: 5px;
}
nav#menu li > a:hover{
border-radius: 5px 5px 5px 5px;
color:#A10115;
}
nav[role=navigation] li a {
border:0;
text-decoration: none;
color:#F0EFEA;
font-size:1.5em;
}
ul li ul.dropdown{
min-width:800px; /* Set width of the dropdown */
background-color:#666;
padding:10px;
display: none;
position:absolute;
z-index: 999;
left: -40px;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
#lilab{
background-color: yellow;
width:100%;
}
#liinfo{
text-align: center;
font-size:10px; line-height: 1.5;
}
li#central{
text-align: center;
height:100px;
width:100px;
background-color:red;
background-repeat: no-repeat;
background-size: cover;
}
li#north{text-align: center;
height:100px;
width:100px;
background-color:red;
background-repeat: no-repeat;
background-size: cover;
}
li#east{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
}
li#west{text-align: center;
height:100px;
width:100px;
background-color:red;
background-repeat: no-repeat;
background-size: cover;
}
li#south{text-align: center;
height:100px;
width:100px;
background-color:red;background-repeat: no-repeat;
background-size: cover;
} <nav id="menu" role="navigation">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="index.html">Locations</a>
<ul class="dropdown">
<li id="central"><a href="#"><div id="lilab">Central</div><div id="liinfo">adress 1</div></a></li>
<li id="north"><a href="#"><div id="lilab">North</div><div id="liinfo">adress 2</div></a></li>
<li id="east"><a href="#"><div id="lilab">East</div><div id="liinfo">adress 3</div></a></li>
<li id="west"><a href="#"><div id="lilab">West</div><div id="liinfo">adress 4</div></a></li>
<li id="south"><a href="#"><div id="lilab">South</div><div id="liinfo">adress 5</div></a></li>
</ul>
</li>
<li><a href="index.html">Contacts</a></li>
<li><a href="index.html">Services</a>
<ul class="dropdown">
<li id="central"><a href="#"><div id="lilab">Central</div><div id="liinfo">address5</div></a></li>
<li id="north"><a href="#"><div id="lilab">North</div><div id="liinfo">address4</div></a></li>
<li id="east"><a href="#"><div id="lilab">East</div><div id="liinfo">address3</div></a></li>
<li id="west"><a href="#"><div id="lilab">West</div><div id="liinfo">address2</div></a></li>
<li id="south"><a href="#"><div id="lilab">South</div><div id="liinfo">address1</div></a></li>
</ul>
</li>
<li><a href="index.html">Media</a></li>
<li><a href="index.html">Partners</a></li>
<li><a href="index.html">Things to Know</a></li>
</ul>
</nav>