Come si fa l'area di hover in css più grande

Question

Ho una lista in html che sto formattando come menu a discesa in CSS, tuttavia, quando passerò il mouse sopra, solo la prima metà del testo sta rispondendo, come si oppone a tutta la sua lunghezza e non riesco a capire quale proprietà modificare per rendere più lunga questa area al passaggio del mouse.

grazie!

codice:

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

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: implementazione: http://jsfiddle.net/CLVwv/1/

Answer 1

Il problema è perché si avere un margine negativo su ogni ul.

Basta rimuovere l'imbottitura da .navbar e ridurre il margine per ottenere la spaziatura desiderata.

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

È inoltre possibile ridurre il CSS rimuovendo i tag ID e utilizzando una classe .navbar, questo sarà anche rendere il codice più flessibile in quanto non si dispone di aggiungere qualsiasi nuovo CSS ogni volta che si desidera aggiungere un voce al 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> 

Vedi http://jsfiddle.net/georeith/CLVwv/2/ per una soluzione di lavoro.

Answer 2

La ragione che sta accadendo è a causa dei margini negativi che si hanno sul ul di. ul # navbar2 copre # navbar1 e # navbar3 copre # navbar2.

C'è una ragione per cui hai bisogno di tre ul separati? Se si utilizza il seguente codice HTML il problema è stato risolto:

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

Ho anche aggiunto un padding 3px per #navbar Li:

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

Vedere il violino: http://jsfiddle.net/2wFjA/1/