9

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/

4

2 に答える 2

5

問題は、それぞれに負のマージンを設定しているためですul。

パディングを削除し.navbarてマージンを減らして、必要なスペースを確保します。

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

ID タグを削除してクラスを使用することで CSS を削減することもできます.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/を参照してください。

于 2013-03-18T22:21:08.657 に答える
3

起こっている理由はあなたが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>

また、＃navbarliに3pxのパディングを追加しました。

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

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

于 2013-03-18T22:18:03.490 に答える