5

純粋なcssドロップダウンメニュー（ここにコード：http：//jsfiddle.net/SeXyv/7/）を作成していますが、アイテムの間にではなく、外側の周りにのみ境界線を設定したいと思います。

私が抱えている問題は、js.fiddleの例の「トピック」と「サブトピック1」の境界です。2つの間の境界線を完全に取得できますが、2つのリンク（金と灰色が出会う場所）の間に直接ではなく、アウトラインとして右上の部分にのみ境界線が必要です。

誰かがここで私を助けることができますか？

ありがとう

編集：これが私が望む境界線の写真です。赤で囲まれた部分で、境界線がその上のタブに到達すると停止します： http ://tinypic.com/view.php?pic=300ehxt&s=6

4

2 に答える 2

4

基本的に、ドロップダウン メニューの最後の要素に下の境界線を配置し、最初の要素に上端の境界線を配置し、ドロップダウン メニューをトリガーする要素の z-index をメニューより高くしてから、メニューの幅を上に押し上げます。メニュー

#menu li:hover a {/*increace the z-index over that of the menu*/
    ...
    position:relative;
    z-index:5;
}
#menu li:hover li:first-child a{/*first menuitem gets a top border */
    border-top:2px black solid;
}
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */
    border-bottom:2px black solid;
}
#menu li:hover ul{/* move up menu to cover up part of top border*/
    position:relative;
    top:-2px;
}

http://jsfiddle.net/SeXyv/14/

于 2012-06-29T05:49:47.440 に答える
0

<li style="z-index: 5"><a href="#" class="bordertest" >Topic</a>HTMLに追加します。そして、必要なクラスを追加します。

ここで働くフィドル

角などを調整します。

于 2012-06-29T05:18:57.603 に答える