html - 如何在不影响主导航的情况下设置 CSS 子导航的样式

Question

http://jsfiddle.net/uuyVY/

截图 http://i.imgur.com/wMzSQ1B.png

我试图让子导航全部为白色并跨越整个包含 div(宽度为 1100 像素)，仅垂直显示文本链接，但无法在不影响主导航的情况下关闭子导航 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>

Answer 1

是这样的吗？

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