W jaki sposób uczynić obszar zawisu w css większym

Question

Mam listę w html, którą formatuję jako rozwijane menu w CSS, jednak po najechaniu myszą odpowiada tylko pierwsza połowa tekstu, w przeciwieństwie do całej jego długości i nie mogę określić, którą właściwość zmienić, aby ten obszar zawisu był dłuższy.

dziękuję!

Kod:

#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 rzeczy:

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>' 

edit: realizacja: http://jsfiddle.net/CLVwv/1/

Answer 1

Problem polega na tym, bo ciebie ustalono ujemną marżę na każdym ul.

Wystarczy usunąć wyściółkę z .navbar i zmniejszyć margines, aby uzyskać pożądany odstęp.

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

Można również zmniejszyć CSS poprzez usunięcie identyfikatory i przy użyciu klasy .navbar, będzie to również uczynić kod bardziej elastyczne, jak nie trzeba dodawać żadnych nowych CSS za każdym razem chcesz dodaj pozycja w menu:

.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> 

Zobacz http://jsfiddle.net/georeith/CLVwv/2/ dla roztworu roboczego.

Answer 2

Dlatego, że dzieje się to z powodu negatywnych marginesów masz na ul tych. ul # navbar2 obejmuje # navbar1, a # navbar3 obejmuje # navbar2.

Czy jest jakiś powód, dla którego potrzebujesz trzech oddzielnych ul? Jeśli używasz następujące html problem został rozwiązany:

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

Dodałem też dopełnienie 3PX do #navbar Li:

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

Zobacz skrzypce: http://jsfiddle.net/2wFjA/1/