0

Photoshop でデザインしたドロップダウン メニューを作成しようとしています。ただし、このメニューの上部には境界線があります。画像は、それをよりよく説明できます：

やりたいメニュー

CSS を使用して得られるのは、それが設計されている以上のものをカバーする行だけです。z-index 位置を使用して作成しようとしましたが、成功しませんでした。私のコードを見てください：

nav{

    display: inline;
    font-weight:900;
    text-transform:uppercase;
    font-size:13px;
    margin-left:95px;
}
.menu > li > a {

    width:auto;
    padding:10px 20px 10px 10px;
    background-image:url('img/seta_menu.png');
    background-repeat:no-repeat;
    background-position:right 50%;
}

.menu>li{   

    width:auto;
    margin-right:45px;
    padding:10px;
    border-left: solid 1px #F8FAFA;
    border-right: solid 1px #F8FAFA;
    border-top:solid 1px #F8FAFA;
    border-bottom:solid 1px #F8FAFA;
}

.menu>li:hover{

    border-left: solid 1px #bdc9c5;
    border-right: solid 1px #bdc9c5;
    border-top:solid 1px #bdc9c5;
    border-bottom:solid 1px #bdc9c5;
    background-color:white;

}

nav>div{

    display:inline; 

}
nav>div>ul{

    display: inline;

}
.menu li{
    display: inline-table;
}
.menu>li:hover >ul{

    display:block;

}
.sub-menu{

    position:absolute;  
    display:none;
    padding:10px;
    margin-left:-11px;
    margin-top:10px;
    border-left: solid 1px #bdc9c5;
    border-right: solid 1px #bdc9c5;
    border-bottom:solid 1px #bdc9c5;
    /*border-top:solid 1px #bdc9c5;*/
    background-color:white; 

}

.sub-menu ol, ul {

    padding:0px;
    margin:0px;

}
.sub-menu > li{

    display:block;

}

http://jsfiddle.net/btgfE/

4

2 に答える 2

1

問題が解決しました...

jsfiddle： http: //jsfiddle.net/btgfE/2/

1）上部の境界線のコメントを解除します.sub-menu

2）下の境界線をコメントアウトします.menu>li:hover

3）.sub-menucssルールを与えるz-index:-1;

margin-top4）の.sub-menuを減らす9px

これが実際に行っているのは、トップレベルのメニュー項目をサブメニュー項目の上部の境界線の上にわずかに重ねて、探している外観を与えることです。

于 2013-03-19T13:58:32.813 に答える
0

ここであなたのフィドルを編集しました：

http://jsfiddle.net/btgfE/4/

私は-1の.submenuaを与えました、これはそれを修正しました。z-index

また、見やすいように色を変えてみました。緑を白に設定する必要があります。サブメニューの境界線の上に境界線があることがわかるように、これを行いました

于 2013-03-19T13:39:17.670 に答える