Html 如何在不影响主导航的情况下设置CSS subnav的样式_Html_Css

Html 如何在不影响主导航的情况下设置CSS subnav的样式

html css

Html 如何在不影响主导航的情况下设置CSS subnav的样式,html,css,Html,Css,截图我试图使subnav全部为白色，并跨越整个contaning div（1100px宽），仅垂直显示文本链接，但无法在不影响主导航背景图像的情况下关闭subnav li背景图像 ul#horiznav, #horiznav ul { /*remove the bullets from the dropdown ul as well*/ margin:0; padding:0; list-style-type:none; height:53px;

截图

我试图使subnav全部为白色，并跨越整个contaning div（1100px宽），仅垂直显示文本链接，但无法在不影响主导航背景图像的情况下关闭subnav li背景图像

    ul#horiznav, #horiznav ul {
    /*remove the bullets from the dropdown ul as well*/
    margin:0;
    padding:0;
    list-style-type:none;
    height:53px;
     font-size:10px;
}
#horiznav li {
    float:left;
    width:150px;
    position:relative
    /*set position:relative as the start point for absolutely positioning the dropdown*/
}
#horiznav li a {
    display:block;
    width:150px;
    line-height:30px;
    text-align:center;
    color:white;
    text-decoration:none;
}
#horiznav li.trees a, #horiznav li.trees {
    width:198px;
    height:53px;
    background-image:url(http://i.imgur.com/7Urmvtg.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.lights a, #horiznav li.lights {
    width:55px;
    height:45px;
    background-image:url(http://i.imgur.com/dB0kyqA.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.ornaments a, #horiznav li.ornaments {
    width:84px;
    height:45px;
    background-image:url(http://i.imgur.com/OKAhP2U.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#ornamentsSUB li a, #horiznav li a:hover;
 #horiznav li {
    width:150px;
    height:30px;
    background-color:red;
}
#horiznav li.wreaths a, #horiznav li.wreaths {
    width:138px;
    height:45px;
    background-image:url(http://i.imgur.com/G9iZZoB.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.christmasdecor a, #horiznav li.christmasdecor {
    width:163px;
    height:45px;
    background-image:url(http://i.imgur.com/9W1q97q.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.commercial a, #horiznav li.commercial {
    width:90px;
    height:45px;
    background-image:url(http://i.imgur.com/2Hcpq1X.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.homedecor a, #horiznav li.homedecor {
    width:90px;
    height:45px;
    background-image:url(http://i.imgur.com/cy5BO92.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.outdoor a, #horiznav li.outdoor {
    width:112px;
    height:45px;
    background-image:url(http://i.imgur.com/fLRrWMs.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.otherholiday a, #horiznav li.otherholiday {
    width:111px;
    height:45px;
    background-image:url(http://i.imgur.com/AjGVCeK.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li.more a, #horiznav li.more {
    width:69px;
    height:53px;
    background-image:url(http://i.imgur.com/V1Y7kCy.png);
    background-repeat:no-repeat;
    background-position: center center;
}
#horiznav li a:hover {
    color:#333333
}
#horiznav li ul {
    display:none;
    /*hide the dropdown*/
    position:absolute;
    /*position it absolutely..*/
    left:0;
    /*...align the left edge with the left edge of the parent li...*/
    top:35px
    /*...and 32px down from the top - 30px height + 2px for the border*/
}
#horiznav li:hover ul {
    display:block
    /*display the ul when the parent li is hovered*/
}
#horiznav li ul a {
    background-color:white;
    background-image:none;
    color:#000000;
}



 <div id="navWrap">
    <ul id="horiznav">
        <li class="trees"><a href="#">ARTIFICIAL CHRISTMAS TREES</a>

            <ul>
                <li><a href="#">Item 2.1</a>
                </li>
                <li><a href="#">Item 2.2</a>
                </li>
            </ul>
        </li>
        <li class="lights"><a href="#">LIGHTS</a>

            <ul>
                <li><a href="#">Item 2.1</a>
                </li>
                <li><a href="#">Item 2.2</a>
                </li>
            </ul>
        </li>
        <li class="ornaments"><a href="#">ORNAMENTS</a>

            <ul>
                <li><a href="#">Item 3.1</a>
                </li>
                <li><a href="#">Item 3.2</a>
                </li>
                <li><a href="#">Item 3.3</a>
                </li>
            </ul>
        </li>
        <li class="wreaths"><a href="#">WREATHS &amp; GARLAND</a>

            <ul>
                <li><a href="#">Item 4.1</a>
                </li>
                <li><a href="#">Item 4.2</a>
                </li>
                <li><a href="#">Item 4.3</a>
                </li>
            </ul>
        </li>
        <li class="christmasdecor"><a href="#">CHRISTMAS DECORATIONS</a>

            <ul>
                <li><a href="#">Item 4.1</a>
                </li>
                <li><a href="#">Item 4.2</a>
                </li>
                <li><a href="#">Item 4.3</a>
                </li>
            </ul>
        </li>
        <li class="commercial"><a href="#">COMMERCIAL</a>

            <ul>
                <li><a href="#">Item 4.1</a>
                </li>
                <li><a href="#">Item 4.2</a>
                </li>
                <li><a href="#">Item 4.3</a>
                </li>
            </ul>
        </li>
        <li class="homedecor"><a href="#">HOME DECOR</a>

            <ul>
                <li><a href="#">Item 4.1</a>
                </li>
                <li><a href="#">Item 4.2</a>
                </li>
                <li><a href="#">Item 4.3</a>
                </li>
            </ul>
        </li>
        <li class="outdoor"><a href="#">OUTDOOR LIVING</a>

            <ul>
                <li><a href="#">Item 4.1</a>
                </li>
                <li><a href="#">Item 4.2</a>
                </li>
                <li><a href="#">Item 4.3</a>
                </li>
            </ul>
        </li>
        <li class="otherholiday"><a href="#">MORE HOLIDAYS</a>

            <ul>
                <li><a href="#">Item 4.1</a>
                </li>
                <li><a href="#">Item 4.2</a>
                </li>
                <li><a href="#">Item 4.3</a>
                </li>
            </ul>
        </li>
        <li class="more"><a href="#">MORE...</a>

            <ul>
                <li><a href="#">Item 4.1</a>
                </li>
                <li><a href="#">Item 4.2</a>
                </li>
                <li><a href="#">Item 4.3</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

ul#horiznav，#horiznav ul{
/*从下拉列表中移除子弹*/
保证金：0；
填充：0；
列表样式类型：无；
高度：53px；
字体大小：10px；
}
#水平导航李{
浮动：左；
宽度：150px；
职位：相对
/*设置位置：相对作为绝对定位下拉列表的起点*/
}
#水平导航李a{
显示：块；
宽度：150px；
线高：30px；
文本对齐：居中；
颜色：白色；
文字装饰：无；
}
#horiznav li.树a，#horiznav li.树{
宽度：198px；
高度：53px；
背景图片：url(http://i.imgur.com/7Urmvtg.png);
背景重复：无重复；
背景位置：中心；
}
#水平导航李灯a，#水平导航李灯{
宽度：55px；
高度：45px；
背景图片：url(http://i.imgur.com/dB0kyqA.png);
背景重复：无重复；
背景位置：中心；
}
#horiznav li.饰品a，#horiznav li.饰品{
宽度：84px；
高度：45px；
背景图片：url(http://i.imgur.com/OKAhP2U.png);
背景重复：无重复；
背景位置：中心；
}
#佩林·斯布·李a，#水平导航·李a：悬停；
#水平导航李{
宽度：150px；
高度：30px；
背景色：红色；
}
#horiznav li.花圈a，#horiznav li.花圈{
宽度：138px；
高度：45px；
背景图片：url(http://i.imgur.com/G9iZZoB.png);
背景重复：无重复；
背景位置：中心；
}
#horiznav li.christmasdecor a，#horiznav li.christmasdecor{
宽度：163px；
高度：45px；
背景图片：url(http://i.imgur.com/9W1q97q.png);
背景重复：无重复；
背景位置：中心；
}
#horiznav li.commercial a，#horiznav li.commercial{
宽度：90px；
高度：45px；
背景图片：url(http://i.imgur.com/2Hcpq1X.png);
背景重复：无重复；
背景位置：中心；
}
#horiznav li.家居装饰a，#horiznav li.家居装饰{
宽度：90px；
高度：45px；
背景图片：url(http://i.imgur.com/cy5BO92.png);
背景重复：无重复；
背景位置：中心；
}
#horiznav li.户外a，#horiznav li.户外{
宽度：112px；
高度：45px；
背景图片：url(http://i.imgur.com/fLRrWMs.png);
背景重复：无重复；
背景位置：中心；
}
#horiznav li.其他假日a，#horiznav li.其他假日{
宽度：111px；
高度：45px；
背景图片：url(http://i.imgur.com/AjGVCeK.png);
背景重复：无重复；
背景位置：中心；
}
#horiznav li.更多a，#horiznav li.更多{
宽度：69px；
高度：53px；
背景图片：url(http://i.imgur.com/V1Y7kCy.png);
背景重复：无重复；
背景位置：中心；
}
#水平导航李a：悬停{
颜色：#333333
}
#水平导航{
显示：无；
/*隐藏下拉列表*/
位置：绝对位置；
/*绝对定位*/
左：0；
/*…将左边缘与父li的左边缘对齐*/
顶部：35px
/*…从顶部向下32像素-30像素高度+2像素边框*/
}
#水平导航李：悬停ul{
显示：块
/*当父li悬停时显示ul*/
}
#horiznav li ul a{
背景色：白色；
背景图像：无；
颜色：#000000；
}

像这样的东西

#horiznav li:hover ul a
{
    background: white;
    color: red;
    background-image: none;
}

你试过给导航添加背景色吗？此外，如果确实需要，您也可以使用z-index。在#horiznav li ul a{background color:white；background image:none；color:#000000；中添加了背景色，显示在t未覆盖的区域中