드롭 다운시 전체 높이 올려 놓기

Question

드롭 다운 메뉴 항목의 전체 폭에 대한 호버 효과에 문제가 있습니다. 각 항목의 배경색을 변경하고 싶습니다. 지금은 드롭 다운의 너비가 아닌 텍스트의 너비 만 가져올 수 있습니다.

http://jsfiddle.net/7AXZR/

감사합니다!

html로 :

<div id="nav"> 

<ul> 
    <li><img src="images/kranz3.png" alt="kranz"/><a href="compete.php" id="competenav">COMPETE</a></li> 
    <li><img src="images/thumb3.png" alt="thumb"/><a href="score.php" id="scorenav">SCORE</a></li> 
    <div id="logolist"><li><a href="index.php"><img src="images/logorz.png" width="175em" /></a></li></div> 
    <li><img src="images/shopnav.png" alt="bag"/><a href="shop.php" id="shopnav">SHOP</a></li> 
    <ul id="more-dropdown"><li><img src="images/morenav2.png" alt="more"/><a href="#" id="morenav">MORE</a><ul> 
     <div id="dropdown-links"> 
     <li><a href="printyourown.php">Print your own art</a></li> 
     <li><a href="compete.php">How it works</a></li> 
     <li><a href="causes.php">About Causes</a></li> 
     <li><a href="#">About our products</a></li> 
     <li><a href="#">About us</a></li> 
     <li><a href="#">Help & Feedback</a></li> 
     <li><a href="termsofservice.php">Terms of Service</a></li> 
     <li><a href="#">Privacy</a></li></ul> 
     </div> 
    </li> 
</ul> 
</div> 
<div class="clear"> 
</div> 

CSS의 :

#nav { 
    position:relative; 
    background:#ffffff; 
    width:100%; 
    height:0.2em: 
    overflow:visible; 
    margin-top:-2em; 
    font-family:Cusmyrb; 
    font-size:75%; 

} 

#logolist { 
    position:absolute; 
    padding-top:2em; 
    width:150px; 
    left:50%; 
    margin-left:-90px; 
    margin-top:-7%; 

} 


#nav ul { 
    list-style-type:none; 

} 

#nav li { 
    display:inline; 
    float:left; 
    width:20%; 
    margin-left:2%; 
    margin-right:2%; 
    margin-top:3%; 
    text-align:center; 
} 



#nav a { 
    display:block; 
    margin-right:0% auto; 
    padding-left:0% auto; 
    color:#343234; 
    text-decoration:none; 


} 

#nav a:hover { 
color:#5020B8; 
} 

#nav a:active { 
color:#5020B8; 
} 

.clear { 
    clear:both; 
} 

#more-dropdown { 
    margin: 0; 
    padding: 0; 
    height:0; 
} 

#more-dropdown li { 
    list-style: none; 
    float: left; 
} 



#dropdown-links li a { 
    float:left; 
    display: block; 
    font-family:Cusmyr; 
    font-size:14px; 
    background-color:#797A7D; 
    color:#797A7D; 
    text-decoration: none; 
    margin-top:0.5em; 
    margin-left:1em; 
} 

    #dropdown-links li a:hover { 
    float:left; 
    display: block; 
    font-family:Cusmyr; 
    font-size:14px; 
    background-color:#01A07E; 
    color:#797A7D; 
    text-decoration: none; 
    margin-top:0.5em; 
    margin-left:1em; 
} 

    #more-dropdown li ul { 
    display: none; 
    width: 6em; /* Width to help Opera out */ 
    background-color:#797A7D; 
    border:1px solid white; 
} 

    #more-dropdown li:hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; } 
#more-dropdown li:hover li { 
    float: none; 
    background-color:#01A07E; 
} 
#more-dropdown li:hover li a { 
    color: #ffffff; 
} 
#more-dropdown li li a:hover { 
} 

Answer 1

스위치

#nav a:hover 

#nav:hover a 

에편집 : 먼저 다음 #nav li 선택 드롭 다운 목록에서 목록 항목에도 적용하고 돈 다음 <li> 요소에 <a> 요소가 전체 목록 항목 초

를 기입하지 않도록 꼭대기과 왼쪽 여백이 그들을 떠내려하지 마라.

새 바이올린 : http://jsfiddle.net/PZGLz/