0

我不确定如何问这个问题。我是响应式设计的新手并且了解向下流动，但我不想在我的菜单上使用向下流动。它分为 3 种尺寸和移动尺寸，我不想要子菜单，需要 100% 的宽度。如何阻止来自先前 id 和 class 选择器的信息。

/*------------menu */
nav {font-family: "BenchNine", "PT Sans Narrow", Arial, Helvetica, sans-serif; 
text-transform: uppercase;
width:960px;
height: 43px;
margin: 0px auto 0px auto;
/*background:#0084FC;*/
border:0px solid #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
z-index:10;

}


/*nav ul {list-style: none;margin: 0;padding: 0 5px; } */
nav ul ul {
display: none;
}



nav ul li:hover > ul {
    display: block;
}


nav ul {margin: 0;padding: 0 5px;list-style: none;position: relative;display: inline-table; z-index:1;}


nav ul:after {
    content: ""; clear: both; display: block;
}


nav ul li span { width:425px;}


nav ul li {
    float: left; position: relative; padding: 0px; top:0px;border-top:0px solid #0082f8;
}


    nav ul li:hover {
        background: #025287;
    }


        nav ul li:hover a {
            color: #fff;
        }


    nav ul li a {font-size: 20px; color: #B3DBFF; display: block; padding: 54px 10px 6px 10px; margin-bottom: 0px; z-index: 10; position: relative; font-weight:bold; text-transform:uppercase;}


nav ul ul {
    background: #0082f8; border-radius: 0px; padding: 0;
    position: absolute; top: 100%; 
}


    nav ul ul li {
        float: none; 
        border-top: 0px solid #0082f8;
        border-bottom: 0px solid #0082f8; 
        position: relative;

    }


        nav ul ul li a {
            padding: 10px 40px;
            color: #fff;
        }   


            nav ul ul li a:hover {
                background: #025287; color:#fff;
            }


nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

这是响应式 css 文件中菜单的 css。

@media only screen and (max-width: 767px) {

nav {width:100%;background:none;height:auto;margin: 0px auto 15px auto;}
nav ul li {float: none;background:#000;text-align:center;padding-bottom:0px;margin-top:5px;}
nav ul li span {clear:}
nav ul li:hover {background: url('../images/menu-bg-act_mob2.png') repeat-x;}
nav ul li a{margin-bottom : 0px;}
nav ul li a{margin-bottom : 0px;}
4

1 回答 1

0

您的问题不是很清楚，但听起来您需要覆盖一些现有的样式声明。

您应该能够通过做出更具体的声明来做到这一点。

例如：

html nav { margin: 20px }将覆盖nav { margin: 10px }.

查看Andy Clarke 的 CSS Specificity Wars了解更多关于该主题的信息。

于 2013-11-11T23:48:59.573 回答