0

ドロップダウン機能を備えた水平メニューを作成しましたが、ほとんど正しく機能しています。これらの問題を解決する適切な方法が見つかりません。

  1. メイン メニューのリンクとドロップダウン メニューの間の距離が少し離れているため、マウスをドロップダウン メニューに移動しようとすると、ドロップダウン メニューが消えて#submenu_dames{top:34px}しまいます。 、しかしそれはまた、その下のメインメニューの灰色の線を覆うことを意味します. ドロップダウンが線の下に留まらなければならないもの。

  2. メイン メニュー リンクの背景色を CSS ホバー効果で変更しようとしました。しかし、背景色が正しい幅と高さでいっぱいにならないということが起こります。

これが私のコードです：

http://jsfiddle.net/flasy_kid/bFBcg/

4

2 に答える 2

0

これは正常に動作しているようです、http://jsfiddle.net/bFBcg/6/

li.menu_item {
    display:inline-block; 
    list-style-type: none; 
    padding-right: 20px; 
    position:relative; 
}
#menu li a {
    text-decoration:none; 
    color:black;
}
#menu_main {
    border-color:#E2E2E2;
    border-style:solid; 
    border-width:1px 0 1px 0;
}
#submenu_dames { 
    margin:0; 
    padding:0; 
    position:absolute; 
    width:550px; 
    border-left:1px solid black; 
    border-right:1px solid black; 
    border-bottom:1px solid black; 
    background:#F6F6F6; display:none;
}
#submenu_heren { 
    margin:0; 
    padding:0; 
    position:absolute; 
    width:550px; 
    border-left:1px solid black; 
    border-right:1px solid black; 
    border-bottom:1px solid black; 
    background:#F6F6F6; 
    display:none;
}
.menu_item:hover #submenu_dames {
    display:block;
}
.menu_item:hover #submenu_heren {
    display:block;
}
.submenu { 
    margin:0; 
    padding:0; 
}
.submenu li { 
    margin:0; 
    padding:0; 
    list-style:none;
}
.submenu_vak {
    float:left; 
    width:150px; 
    margin: 5px; 
    padding: 5px;
}
.submenu_titel {
    font-weight:bold;
}
.menu_item:hover {
    background-color:#eee;
}
于 2012-07-01T12:42:10.303 に答える
0

また、ID ではなくクラスを使用するように変更して、CSS をより汎用的にする必要がありますが、これにより、リストした 2 つの問題が解決されます: http://jsfiddle.net/bFBcg/2/

于 2012-07-01T12:33:24.493 に答える