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

編集： 実装： 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年代に持って負のマージンです。 ul＃navbar2は＃navbar1をカバーし、＃navbar3は＃navbar2をカバーしています。

3つの別々のulが必要な理由はありますか？あなたは問題が解決された次のHTMLを使用する場合：

<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パディングを追加しました：

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

はフィドルを参照してください：http://jsfiddle.net/2wFjA/1/