结合水平菜单和下拉菜单

时间：2013-07-14 16:14:27

标签： css menu

我正在试图将这两个菜单结合起来： http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/ http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/

但是第一个的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 &amp; 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;
    }
}

0 个答案:

没有答案
相关问题
最新问题