【发布时间】：2016-03-04 20:47:54
【问题描述】：
我正在尝试为菜单的各个方面分离 CSS，因为它会影响悬停时的子菜单。我错过了什么？每当我将鼠标悬停在子菜单上时，我都会获得背景颜色并且图片正在被更改。如何在不溢出效果的情况下分离顶部菜单和子菜单的 css？
如何区分 main li hover 和 ul li ul li a on hover 的 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;
}
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>【问题讨论】：