CSS에서 호버 영역을 넓게 만드는 방법

Question

CSS에서 드롭 다운 메뉴로 서식을 지정하는 html로 된 목록이 있지만, 마우스를 가져 가면 텍스트의 첫 번째 부분 만 응답합니다. 그것의 전체 길이에 반대, 그리고이 호버 지역을 길게하기 위해 어떤 속성을 변경 알아낼 수 없습니다.

감사합니다.

코드 :

#navbar { 
    position: relative; 
    margin: 10px; 
    margin-left: -27px; 
    /*height: 13px; */ 
    float: left; 
} 

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

#navbar li a { 
    display: block; 
    padding: 3px 8px; 
    background-color: #00AA63; 
    color: #fff; 
    text-decoration: none; 
} 

#navbar li ul { 
    color: #fff; 
    display: none; 
    width: 10em; 
} 

#navbar li:hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    /*width: 200%;*/ 
} 

#navbar li:hover li { 
    float: none; 
    /*width: 200%;*/ 
} 

#navbar li:hover li a { 
    background-color: #00AA63; 
    color: #fff; 
    border-bottom: 1px solid #fff; 
    color: #fff; 
} 

#navbar li li a:hover { 
    color: #fff; 
    background-color: #33BB96; 
} 

JQuery와 물건 :

document.getElementById("menu").innerHTML += '<ul id="navbar">' 
    + '<li><a href="#">other electives</a>' 
    + '<ul id="navbar">' 
    +  '<li><a href="#">Subitem One</a></li>' 
    +  '<li><a href="#">Second Subitem</a></li>' 
    +  '<li><a href="#">Numero Tres</a></li></ul>' 
    + '</li>' 

편집 : 구현 : 때문에 당신이 UL 년대에 미칠 부정적인 여백입니다 무슨 일이 일어나고 http://jsfiddle.net/CLVwv/1/

Answer 1

문제는 당신 때문에 각 ul에 음수 마진을 설정했습니다.

패딩을 .navbar에서 제거하고 원하는 간격을 확보하기 위해 여백을 줄이면됩니다.

.navbar { 
    position: relative; 
    margin: 10px 1px; 
    /*height: 13px; */ 
    float: left; 
    padding-left: 0px; 
} 

당신이 어떤 새로운 CSS에게 당신이를 추가 할 때마다 추가 할 필요가 없습니다으로 당신은 또한 ID 태그를 제거하고 .navbar 클래스를 사용하여 CSS를 줄일 수 있습니다

,이 또한 코드를보다 유연하게됩니다 메뉴에 항목 :

.navbar { 
    position: relative; 
    margin: 10px 1px; 
    /*height: 13px; */ 
    float: left; 
    padding-left: 0px; 
} 

.navbar li { 
    list-style: none; 
    overflow: hidden; 
} 


.navbar li a { 
    display: block; 
    padding: 3px 8px; 
    background-color: #00AA63; 
    color: #fff; 
    text-decoration: none; 
} 

.navbar li ul { 
    color: #fff; 
    display: none; 
    width: 10em; 

} 

.navbar li:hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    /*width: 200%;*/ 
} 

.navbar li:hover li { 
    float: none; 
    /*width: 200%;*/ 
} 

.navbar li:hover li a { 
    background-color: #00AA63; 
    color: #fff; 
    border-bottom: 1px solid #fff; 
    color: #fff; 
} 

.navbar li li a:hover { 
    color: #fff; 
    background-color: #33BB96; 
} 

HTML :

<ul class="navbar"> 
    <li><a href="#">other electives</a> 
     <ul class="navbar"> 
      <li><a href="#">Subitem One</a></li> 
      <li><a href="#">Second Subitem</a></li> 
      <li><a href="#">Numero Tres</a></li></ul> 
    </li> 
</ul> 
<ul class="navbar"> 
    <li><a href="#">other electivesother electives</a> 
     <ul class="navbar"> 
      <li><a href="#">Subitem One</a></li> 
      <li><a href="#">Second Subitem</a></li> 
      <li><a href="#">Numero Tres</a></li></ul> 
    </li> 
</ul> 
<ul class="navbar"> 
    <li><a href="#">other electives</a> 
     <ul class="navbar"> 
      <li><a href="#">Subitem One</a></li> 
      <li><a href="#">Second Subitem</a></li> 
      <li><a href="#">Numero Tres</a></li></ul> 
    </li> 
</ul> 

이 작업 솔루션을 http://jsfiddle.net/georeith/CLVwv/2/를 참조하십시오.

Answer 2

이유. ul # navbar2는 # navbar1을 커버하고 # navbar3은 # navbar2를 커버합니다.

세 개의 분리 된 ul가 필요한 이유가 있습니까? 당신은 문제가 해결 될 때 다음과 같은 HTML을 사용하는 경우 :

#navbar li { 
    list-style: none; 
    float: left; 
    padding-right: 3px; 
} 

는 바이올린 : 참조 :

<ul id="navbar"> 
    <li><a href="#">other electives</a> 
     <ul class="navbar"> 
      <li><a href="#">Subitem One</a></li> 
      <li><a href="#">Second Subitem</a></li> 
      <li><a href="#">Numero Tres</a></li></ul> 
    </li> 

    <li><a href="#">other electivesother electives</a> 
     <ul class="navbar"> 
      <li><a href="#">Subitem One</a></li> 
      <li><a href="#">Second Subitem</a></li> 
      <li><a href="#">Numero Tres</a></li></ul> 
    </li> 

    <li><a href="#">other electives</a> 
     <ul class="navbar"> 
      <li><a href="#">Subitem One</a></li> 
      <li><a href="#">Second Subitem</a></li> 
      <li><a href="#">Numero Tres</a></li></ul> 
    </li> 
</ul> 

는 또한 리튬을 #navbar하는 3px의 패딩을 추가 http://jsfiddle.net/2wFjA/1/