방법에 영향을주지 않고 I에게 스타일 CSS의 subnav을 홈페이지 탐색

Question

http://jsfiddle.net/uuyVY/

스크린 샷 난 그냥 함께, 모든 흰색을하고 (1100px 폭입니다) 전체 contaning div에 걸쳐하는 subnav를 얻기 위해 노력하고 http://i.imgur.com/wMzSQ1B.png

텍스트 링크는 수직으로 표시되지만 메인 nav 배경 이미지에 영향을 미치지 않고 서브 맵 리 배경 이미지를 끌 수 없습니다.

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