2

これは説明が難しいものです。メニュー項目用のタブとサブメニュー用の幅の広いブロックを持つドロップダウン メニューを取得しようとしています。メニュー全体が 1px の水平線上に表示されます。jsfiddleを介して説明する方が簡単です

ヘッダーには、border-bottom 属性があります。ナビゲーションの list-style-type は none であり、その項目は互いに横に並んでいます。これはロールオーバー タブです。

ul li a {
    color:#222222;
    height:20px;
    text-decoration:none;
    display:block;
    background:white;
    padding:6px 10px 8px 10px;
    border-left:1px solid #FFFFFF;
    border-right:1px solid #FFFFFF;
    border-top:1px solid #FFFFFF;
    transition: border-color 0.23s linear;
}

ul li a:hover {
    color:#FF0000;
}

ul li.toplevel a:hover, ul li.toplevel a.hoversub {
    color:#FF0000;
    height:19px;
    border-left:1px solid #FF0000;
    border-right:1px solid #FF0000;
    border-top:1px solid #FF0000;
    background:white;
    padding-bottom:9px;
    border-color:#FF0000
}

そして、これはサブメニュータグです:

ul.submenu {
    position:absolute;
    list-style-type:none;
    width:187px;
    margin:0 0 0 0;
    padding:0;
    display:none;
    z-index:999999;
    background:#FFFFFF;
    /*border-top:1px solid #FF0000;*/
    border-left:1px solid #FF0000;
    border-right:1px solid #FF0000;
    border-bottom:1px solid #FF0000;
    }

問題は (jsfiddle からわかるように) サブメニューの上部が水平線を遮ることです。これに border-top 属性を追加すると、タブの下に境界線が続き、サブメニューと連続しているように見えます。

これを達成する方法についてのアイデアは大歓迎です。

編集: jsfiddle を更新しました。

4

2 に答える 2

2

これを試してください：http://jsfiddle.net/qKyhZ/10/

これをcssに追加しました：

ul .submenu:before {
background-color: #FF0000;
content: "";
height: 1px;
left: 71px;
position: absolute;
top: 0;
width: 120px;
}
于 2013-09-28T22:27:01.280 に答える
0

これが探しているものかどうかはわかりませんが、<hr>または<div>を使用して、上部の水平線とスタイル/位置をレンダリングしてみませんか?

http://jsfiddle.net/qKyhZ/6/

于 2013-09-28T22:25:51.513 に答える