html - メイン ナビゲーションに影響を与えずに CSS サブナビゲーションのスタイルを設定するにはどうすればよいですか

Question

http://jsfiddle.net/uuyVY/

スクリーンショットhttp://i.imgur.com/wMzSQ1B.png

サブナビをすべて白にして、含まれる div 全体 (幅 1100 ピクセル) にまたがらせ、テキスト リンクだけを垂直に表示しようとしていますが、メインのナビの背景画像に影響を与えずにサブナビの背景画像をオフにすることはできません。 .

    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;
}