如何删除css下拉菜单中的重叠行_Css_Menu_Border

如何删除css下拉菜单中的重叠行

css menu

如何删除css下拉菜单中的重叠行,css,menu,border,Css,Menu,Border,在下面的css代码中，底部和顶部边界似乎重叠，这导致了一条粗线，我似乎不知道如何删除它。任何建议都将不胜感激！多谢各位 html代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> <link href="navCSS.c

在下面的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>

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

li {
    margin-bottom: -1px;
}

你也可以做页边空白：-1px-但这应该给你一个如何去做的想法

您应该去掉顶部边框，即

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

而不是

border: 1px solid #ccc;

边缘顶部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;
}

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

将此JSFIDLE添加到您的问题中，对于试图帮助您的人来说，这真是太好了：

#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;
}

#navMenu ul li:not(:last-child) a {
    border-bottom-style: none;
}