0

各ドロップダウン メニュー項目の全幅でのホバー効果に問題があります。各アイテムの背景色を変更したい。現時点では、ドロップダウンの幅ではなく、ホバーしたテキストの幅しか取得できません。

http://jsfiddle.net/7AXZR/

ありがとう！

HTML:

<div id="nav">

<ul>
    <li><img src="images/kranz3.png" alt="kranz"/><a href="compete.php" id="competenav">COMPETE</a></li>
    <li><img src="images/thumb3.png" alt="thumb"/><a href="score.php" id="scorenav">SCORE</a></li>
    <div id="logolist"><li><a href="index.php"><img src="images/logorz.png" width="175em" /></a></li></div>
    <li><img src="images/shopnav.png" alt="bag"/><a href="shop.php" id="shopnav">SHOP</a></li>
    <ul id="more-dropdown"><li><img src="images/morenav2.png" alt="more"/><a href="#" id="morenav">MORE</a><ul>
        <div id="dropdown-links">
        <li><a href="printyourown.php">Print your own art</a></li>
        <li><a href="compete.php">How it works</a></li>
        <li><a href="causes.php">About Causes</a></li>
        <li><a href="#">About our products</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Help & Feedback</a></li>
        <li><a href="termsofservice.php">Terms of Service</a></li>
        <li><a href="#">Privacy</a></li></ul>
        </div>
    </li>
</ul>
</div>
<div class="clear">
</div>

CSS:

#nav {
    position:relative;
    background:#ffffff;
    width:100%;
    height:0.2em:
    overflow:visible;
    margin-top:-2em;
    font-family:Cusmyrb;
    font-size:75%;

}

#logolist {
    position:absolute;
    padding-top:2em;
    width:150px;
    left:50%;
    margin-left:-90px;
    margin-top:-7%;

}


#nav ul {
    list-style-type:none;

}

#nav li {
    display:inline;
    float:left;
    width:20%;
    margin-left:2%;
    margin-right:2%;
    margin-top:3%;
    text-align:center;
}



#nav a {
    display:block;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#343234;
    text-decoration:none;


}

#nav a:hover {
 color:#5020B8;
}

#nav a:active {
 color:#5020B8;
}

.clear {
    clear:both;
}

#more-dropdown {
    margin: 0;
    padding: 0;
    height:0;
}

#more-dropdown li {
    list-style: none;
    float: left;
}



#dropdown-links li a {
    float:left;
    display: block;
    font-family:Cusmyr;
    font-size:14px;
    background-color:#797A7D;
    color:#797A7D;
    text-decoration: none;
    margin-top:0.5em;
    margin-left:1em;
}

    #dropdown-links li a:hover {
    float:left;
    display: block;
    font-family:Cusmyr;
    font-size:14px;
    background-color:#01A07E;
    color:#797A7D;
    text-decoration: none;
    margin-top:0.5em;
    margin-left:1em;
}

    #more-dropdown li ul {
    display: none; 
    width: 6em; /* Width to help Opera out */
    background-color:#797A7D;
    border:1px solid white;
}

    #more-dropdown li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }
#more-dropdown li:hover li {
    float: none;
    background-color:#01A07E;
}
#more-dropdown li:hover li a {
    color: #ffffff;
}
#more-dropdown li li a:hover { 
}
4

1 に答える 1

1

スイッチ

#nav a:hover

に

#nav:hover a

編集：最初：<a>要素内の<li>要素には上と左の余白があるため、リスト項目全体がいっぱいになりません

2 番目:#nav liセレクターはドロップダウン リストのリスト項目にも適用され、フロートさせたくない場合。これは、周囲のリスト項目の高さが 0 であるためです。

最初のリスト項目を除いてフロートを削除しました:

新しいフィドル: http://jsfiddle.net/PZGLz/

于 2013-03-18T22:54:29.397 に答える