我正在尝试结合这两个菜单： http ://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/ http://tympanus.net/codrops/2010/11/25/ 叠加效果菜单/
但是第一个的 css 风格压倒了第二个。它破坏了
<ul><li>
和
<a>
第二个的属性使它看起来像它本身。而且我无法分离这些样式属性，因为我必须嵌套使用它们。那么我该怎么做才能将它与菜单结合起来而不损失任何功能呢？
html:
<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>
CSS：
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot');
src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.svg#icomoon') format('svg');
};
}
.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-team:before {
content: "\e000";
}
.icon-blog:before {
content: "\e001";
}
.icon-home:before {
content: "\e002";
}
.icon-portfolio:before {
content: "\e003";
}
.icon-services:before {
content: "\e004";
}
.icon-contact:before {
content: "\e005";
}
.icon-menu:before {
content: "\f0c9";
}
a, li {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Global CSS that are applied for all screen sizes */
.nav ul {
width: 100%;
min-width:1200px;
margin: 0;
padding: 0;
list-style: none;
color:#286fbd;
font-size:20px;
font-family: 'Asap';
text-shadow:0px 0px 0 rgb(202,202,202),0px 1px 0 rgb(158,158,158), 0px 2px 0 rgb(115,115,115),0px 3px 2px rgba(0,0,0,0.6),0px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}
.nav li span {
display: block;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
}
.nav i{
/* Make the font smoother for Chrome */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a {
color: rgba(249, 249, 249, .5);
}
.no-touch .nav ul:hover a:hover {
color: rgba(255, 255, 255, 1);
}
/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) {
background: rgb(43, 107, 151);
}
.nav li:nth-child(6n+2) {
background: rgb(52, 122, 169);
}
.nav li:nth-child(6n+3) {
background: rgb(61, 137, 187);
}
.nav li:nth-child(6n+4) {
background: rgb(71, 153, 205);
}
.nav li:nth-child(6n+5) {
background: rgb(205, 71, 86);
}
.nav li:nth-child(6n+6) {
background: rgb(187, 61, 76);
}
.nav li:nth-child(6n+7) {
background: rgb(169, 52, 66);
}
.nav li:nth-child(6n+8) {
background: rgb(151, 43, 57);
}
/* For screen bigger than 800px */
/* Transforms the list into a horizontal navigation */
.nav li {
float: left;
width: 12.5%;
text-align: center;
-webkit-transition: border .5s;
-moz-transition: border .5s;
-o-transition: border .5s;
-ms-transition: border .5s;
transition: border .5s;
}
.nav a {
display: block;
width: auto;
}
/* hover, focused and active effects that add a little colored border to the different items */
.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {
border-bottom: 4px solid rgb(0,54,148);
}
.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
border-bottom: 4px solid rgb(27,56,135);
}
.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
border-bottom: 4px solid rgb(54,58,123);
}
.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
border-bottom: 4px solid rgb(92,68,111);
}
.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
border-bottom: 4px solid rgb(108,60,86);
}
.no-touch .nav li:nth-child(6n+6) a:hover,
.no-touch .nav li:nth-child(6n+6) a:active,
.no-touch .nav li:nth-child(6n+6) a:focus {
border-bottom: 4px solid rgb(135,53,66);
}
.no-touch .nav li:nth-child(6n+7) a:hover,
.no-touch .nav li:nth-child(6n+7) a:active,
.no-touch .nav li:nth-child(6n+7) a:focus {
border-bottom: 4px solid rgb(162,45,45);
}
.no-touch .nav li:nth-child(6n+8) a:hover,
.no-touch .nav li:nth-child(6n+8) a:active,
.no-touch .nav li:nth-child(6n+8) a:focus {
border-bottom: 4px solid rgb(190,52,38);
}
/* Placing the icon */
.icon {
padding-top: 1em;
}
.icon + span {
margin-top: 1em;
-webkit-transition: margin .3s, text-shadow .3s;
-moz-transition: margin .3s, text-shadow .3s;
-o-transition: margin .3s, text-shadow .3s;
-ms-transition: margin .3s, text-shadow .3s;
transition: margin .3s, text-shadow .3s;
}
/* Animating the height of the element*/
.nav a {
height: 7.2em;
}
.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
height: 7.4em;
}
/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
text-shadow:0px 0px 0 rgb(202,202,202),0px -1px 0 rgb(158,158,158), 0px -2px 0 rgb(115,115,115),0px -3px 2px rgba(0,0,0,0.6),0px -3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
-webkit-transition: margin .3s, text-shadow .3s;
-moz-transition: margin .3s, text-shadow .3s;
-o-transition: margin .3s, text-shadow .3s;
-ms-transition: margin .3s, text-shadow .3s;
transition: margin .3s, text-shadow .3s;
}
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
/*border-radius: 50%;*/
font-size: 1.8em;
-webkit-box-shadow: 0 8px 6px -6px #1c1c1c;
-moz-box-shadow: 0 8px 6px -6px #1c1c1c;
box-shadow: 0 8px 6px -6px #1c1c1c;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .5s;
-moz-transition: box-shadow .5s;
-o-transition: box-shadow .5s;
-ms-transition: box-shadow .5s;
transition: box-shadow .5s;
}
/* Animate the box-shadow to create the effect */
.no-touch .nav a:hover i,
.no-touch .nav a:active i,
.no-touch .nav a:focus i {
-webkit-box-shadow: 0 -8px 6px -6px #1c1c1c;
-moz-box-shadow: 0 -8px 6px -6px #1c1c1c;
box-shadow: 0 -8px 6px -6px #1c1c1c;
}
.cbp-hrmenu {
width: 100%;
margin-top: 2em;
border-bottom: 4px solid #47a3da;
}
/* general ul style */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em;
}
.cbp-hrmenu > ul > li {
display: inline-block;
}
.cbp-hrmenu > ul > li > a {
font-weight: 700;
padding: 1em 2em;
color: #999;
display: inline-block;
}
.cbp-hrmenu > ul > li > a:hover {
color: #47a3da;
}
.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: #fff;
background: #47a3da;
}
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
}
.cbp-hrsub h4 {
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries */
@media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
@media screen and (max-width: 43em) {
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu > ul > li {
display: block;
border-bottom: 4px solid #47a3da;
}
.cbp-hrmenu > ul > li > a {
display: block;
padding: 1em 3em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h4 {
padding-top: 0.6em;
}
}
@media screen and (max-width: 36em) {
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}