1

次のcssコードでは、下と上の境界線が重なっているように見え、太い線が表示され、それを削除する方法がわかりません。アドバイスをいただければ幸いです。ありがとうございました。

htmlコード：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<link href="navCSS.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>

</ul> <!--inner UL-->
</li> <!--main LI-->
</ul> <!--main UL-->






<br class="clearFloat">

</div> <!--navMenu->
</div> <!-- wrapper -->


</body>
</html>

cssコード：

#navMenu{

    margin:0;
    padding:0;

}

#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;

}

#navMenu li {
    margin:0;
    padding:0;
    /*removes the bullet point*/
    list-style:none;
    float:left;
    position:relative;
    background: #fff;


}




/*for top level */
#navMenu ul li a{
    text-align:center;
    font-family:"calibri";
    text-decoration:none; /*remove underline*/

    /*height width for all links*/
    height:30px;
    width:150px;
    display:block;
    border: 1px solid #ccc;
    color: #777;


}








/* hiding inner ul*/
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    /*must match height of ul li a*/
    top:32px;


}
/*selecting top menu to display the submenu*/

#navMenu ul li:hover ul{
    visibility:visible;


}

#navMenu li:hover{
    background-color: #F9F9F9;
    }


#navMenu ul li:hover ul li a:hover{

    color: E2144A;

}

#navMenu ul li a:hover{
        color: E2144A;
}
4

4 に答える 4

0

上の境界線を取り除く必要があります。つまり

border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;

それ以外の

border: 1px solid #ccc;
于 2012-06-01T12:47:45.313 に答える
0

マージントップ 0 px; クラスの下のリンゴ。

#navMenu ul li a{
    text-align:center;
    font-family:"calibri";
    text-decoration:none; /*remove underline*/

    /*height width for all links*/
    height:30px;
    width:150px;
    display:block;
    border: 1px solid #ccc;
    border-top:0px;
    color: #777;
}
于 2012-06-01T12:54:05.070 に答える
0

最後のアイテムを除くすべてのアイテムの下の境界線を削除するセレクターを追加しました。

http://jsfiddle.net/GWcnK/5/

#navMenu ul li:not(:last-child) a {
    border-bottom-style: none;
}
于 2014-02-02T22:18:44.600 に答える
-1

ドロップダウンのリストアイテムにこれを追加します。

li {
    margin-bottom: -1px;
}

また、margin-top：-1pxを実行することもできますが、これにより、その方法がわかります。

于 2012-06-01T12:46:30.450 に答える