CSS alanındaki gezinme alanını nasıl büyütürsiniz

Question

CSS'de açılır menü olarak biçimlendirdiğim html'de bir liste var, ancak, üzerine geldiğimde, metnin yalnızca ilk yarısı yanıt veriyor, tüm uzunluğu karşı ve bu vurgulu alan daha uzun yapmak için hangi özellik değişeceğini anlayamıyorum.

Teşekkürler!

kodu:

#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 şeyler:

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

düzenleme: uygulaması: çünkü ül yıllardan üzerindeki olumsuz marjlar olduğunu oluyor http://jsfiddle.net/CLVwv/1/

Answer 1

sorundur çünkü sen Her ul'da negatif marj ayarladı.

Sadece dolguyu .navbar'dan kaldırın ve istediğiniz boşluğu elde etmek için kenar boşluğunu azaltın.

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

herhangi bir yeni CSS bir Eklemek istediğiniz her zaman eklemek gerekmez olarak da kimlik etiketleri kaldırarak ve .navbar sınıfını kullanarak CSS azaltabilir

, bu da kod daha esnek hale getirecek menüye öğesi:

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

bir çalışma çözümü için http://jsfiddle.net/georeith/CLVwv/2/ bakınız.

Answer 2

sebep. ul # navbar2 # navbar1'i kaplıyor ve # navbar3 # navbar2'yi kaplıyor.

Üç ayrı ul'e ihtiyaç duymanız için bir neden var mı? Sorun çözüldüğünde aşağıdaki html kullanıyorsanız:

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

keman Bkz:

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

Ben de li #navbar bir 3px dolgusu eklendi http://jsfiddle.net/2wFjA/1/