0

このフィドルを確認してください: http://jsfiddle.net/cZTjd/1/

ドロップダウン リストを完全にクリック可能にする必要があります。現在、同じリンクの他の部分ではなく、テキストをクリックした場合にのみリンクが開きます。一部のリスト項目には、1 つまたは 2 つの文字しか含まれていない場合があります。したがって、テキストをクリックすることだけを許可するのは良くありません。アンカータグの位置を変更せずにcssを編集するだけでこの問題を解決する方法はありますか?

.top-header{
    height:40px;
    background:#383838;
    padding:0 30px;
}
.top-active-link{
    height: 39px;
    background: #545454;
    padding: 12px;
}
.top-header-links-right .simple{color:#fff;}
.top-header-links-right .simple:hover{text-decoration:none;}
.top-header-links-right{
    float:right;
    position:relative;
    top:-15px;
}
.top-header-links-left{
    list-style:none;
    float:left;
    position:absolute;
    line-height:8px;
    left:-10px;
    top:-15px;
    z-index:999;
}
.top-header-links-left li a:hover{
    text-decoration:none;
}
.top-header-links-left li:hover >.top-header-links-left-drop ul{
    display:block;
}
.top-header-links-right li:hover >.top-header-links-right-drop ul{
    display:block;
}
.top-header-links-left .top-header-links-left-drop, .top-header-links-left .top-header-links-right-drop{
    z-index:99;
}
.top-header-links-left .top-header-links-left-drop ul{
    padding:0;
    z-index:99;
    display:none;
    position:absolute;
    background:#383838;
    list-style:none;
    width:200px;
    box-shadow: 0px 1px 3px #C2C2C2;
    border-radius: 0;
    top:39px;
    margin-left:-5px;
}
.top-header-links-right .top-header-links-right-drop ul{
    padding:0;
    z-index:99;
    display:none;
    position:absolute;
    background:#383838;
    list-style:none;
    width:200px;
    box-shadow: 0px 1px 3px #C2C2C2;
    border-radius: 0;
    top:39px;
    right:95px;
}

.top-header-links-left .top-header-links-left-drop ul li, .top-header-links-right .top-header-links-right-drop ul li{
    padding:0;
    height:30px;
    line-height:30px;
}
.top-header-links-left .top-header-links-left-drop li, .top-header-links-right .top-header-links-right-drop li{
    list-style:none;
    border-bottom:1px solid #4B4B4B;
    display:list-item;
    width:100%;
}
.top-header-links-left .top-header-links-left-drop li:hover, .top-header-links-right .top-header-links-right-drop li:hover{
    background:#545454;
    cursor:pointer;
}
.top-header-links-left .top-header-links-left-drop li a, .top-header-links-right .top-header-links-right-drop li a{
    position:relative;
    left:10px;
    padding:3px;
    color:#fff;
    line-height:30px;
}
.top-header-links-left .top-header-links-left-drop li:hover, .top-header-links-right .top-header-links-right-drop li:hover{
    text-decoration:none;
}
.blog-count{
    position: relative;
    height: 12px;
    width: 8px;
    border-radius: 2px;
    background: #6CB535;
    top: -5px;
    left: 3px;
    color: white;
    font-size: 11px;
    line-height: 12px;
    padding-left: 3px;
    display: inline-block;
}
.blog-count a{
    color:#fff;
    text-decoration:none;
}
.blog-count:hover{
    cursor:pointer;
    background:#549b1e;
}
.top-header-links-right ul{
    list-style:none;
    line-height:8px;
    position: relative;
    right: -20px;
}
.top-header-links-left li, .top-header-links-right li{
    float:left;
    color:#fff;
    text-transform:uppercase;
    font-size:11px;
    margin-right:20px;
    letter-spacing:1px;
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
    height:39px;
    line-height:40px;
    width:auto;
    padding:0 5px;
    cursor:pointer;
}
.top-header-links-right li{
    height:39px;
    line-height:39px;
}
.top-header-links-left a, .top-header-links-right a{
    color:#fff;
    text-decoration:none;
}
.top-header-links-left li:hover, .top-header-links-right li:hover{
    text-decoration:none;
    background:#545454;
}
.top-header-links-right li:last-child:hover{
    background:#6bb533;
}
.top-header-links-right .top-header-links-right-drop ul li:last-child:hover{
    background:#545454;
}

</p> 

<div class="top-header">
            <ul class="top-header-links-left">
                <li><a href="#">tools</a>
                    <div class="top-header-links-left-drop">
                        <ul>
                            <li><a href="#">go.htm file</a></li>
                            <li><a href="#">simple bookmarlet</a></li>
                            <li><a href="#">sidebar</a></li>
                            <li><a href="#">import links (beta)</a></li>
                            <li><a href="#">API</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">blog</a>
                    <span class="blog-count"><a href="#">9</a></span>
                </li>
                <li><a href="#">settings</a></li>
                <li><a href="#">support</a></li>
            </ul>
        </div>​
4

4 に答える 4

2

widthのとを一致するようにheight設定して、リストアイテムの領域全体を埋めるようにします。awidthheightli

その後、エリア全体がリンクされます。

于 2012-11-27T09:30:36.167 に答える
2

A は、高さ/幅を設定できるブロック要素である必要があります。以下のコードは、あなたが望むことをするはずです。

li a {
    display: inline-block;
    height: 100%;
    width: 100%;
}
于 2012-11-27T09:35:26.780 に答える
0

top:-15pxから削除.top-header-links-left

デモ

于 2012-11-27T09:54:03.260 に答える
0

次のようなことを試してください： 

li a {
    width: 100%;
    height: 100%;
    float: right;
}
于 2012-11-27T09:33:13.603 に答える