我正在试图将这两个菜单结合起来： http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/ http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
第一个将保持不变，第二个子菜单将与它一起使用。但是当我开始更改css代码并使它们合并时，我总是遇到一个特定的错误。 “responsive-retina-ready-menu”的“ul，li和a”属性会影响我从“overlay-effect-menu”中获取的子菜单，我无法将这些属性分开。我的意思是它显示子菜单，因为它与主菜单具有相同的样式。我该怎么办？
我拥有的那个：
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>
我想要的那个：
<div class="main clearfix">
<nav id="menu" class="nav">
<ul>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-home"></i>
</span>
<span>Menu 1</span>
</a><div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-services"></i>
</span>
<span>Menu 2</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-portfolio"></i>
</span>
<span>Menu 3</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-blog"></i>
</span>
<span>Menu 4</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-team"></i>
</span>
<span>Menu 5</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 6</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 7</span>
</a>
</li>
<li>
<a href="#">
<span class="icon">
<i aria-hidden="true" class="icon-contact"></i>
</span>
<span>Menu 8</span>
</a>
</li>
</ul>
</nav>
</div>
答案 0 :(得分：0)
就像我在评论中提到的那样，你需要分别指定父元素和子元素的样式。
例如，要将list-style:none设置为父ul，您需要以下CSS选择器：
ul {
list-style:none;
}
要将默认样式保留给子ul s，您需要在上一个之后添加以下选择器：
ul ul {
list-style:disc;
}
Here's a demo基于OP中给出的HTML，具有最小的样式，但说明了您可以单独设置父元素和子元素的样式。 （注意：将鼠标悬停在菜单1上）