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

我添加了一个选择器来删除除最后一个之外所有项目的底部边框。

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

#navMenu ul li:not(:last-child) a {
    border-bottom-style: none;
}
于 2014-02-02T22:18:44.600 回答
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 像素；苹果低于类。

#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 回答
-1

将此添加到下拉列表中的列表项中：

li {
    margin-bottom: -1px;
}

你也可以做 margin-top: -1px - 但这应该让你知道如何去做。

于 2012-06-01T12:46:30.450 回答