1
我想分開CSS的菜單的所有方面，因爲它影響懸停子菜單。我錯過了什麼？每當我將鼠標移到子菜單上時，我都會獲得背景色，並且圖片正在被更改。我怎樣才能分離頂部菜單和子菜單的CSS，而不會影響效果？主菜單影響我的子菜單
如何分離主li懸停和ul li li li懸停的css效果？或者至少可以這樣做，主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;
} \t \t
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; \t /* 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;
}
\t<nav id="menu" role="navigation">
\t \t <ul>
<li><a href="index.html">home</a></li> \t
<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>
\t \t <li><a href="index.html">Contacts</a></li>
\t \t <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>
\t \t \t </ul>
\t \t </nav>