如何在css下拉菜單中刪除重疊行

在下面的css代碼中，底部和頂部邊框看起來重疊，這會導致粗線條，我似乎無法弄清楚如何刪除它。任何建議表示讚賞！謝謝。如何在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; 
}

來源

2012-06-01 greenpool

此的jsfiddle添加到您的問題，這是非常好的人想幫你：http://jsfiddle.net/GWcnK/ – Manuel

-1

在下拉添加到您的列表項：

li { 
    margin-bottom: -1px; 
}

你也可以做的margin-top： -1px - 但這應該讓你知道如何去做。

來源

2012-06-01 12:46:30

你應該拿出上邊框即

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

，而不是

border: 1px solid #ccc;

來源

2012-06-01 12:47:45

邊距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-01 12:54:05

我添加了一個選擇器來刪除除最後一項以外的所有項目的底部邊框。

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

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

來源

2014-02-02 22:18:44 robjtede

如何在css下拉菜單中刪除重疊行

回答

相關問題