gpt4 book ai didi

css - 如何删除CSS下拉菜单中的重叠线

转载 作者:太空宇宙 更新时间:2023-11-03 19:34:46 25 4
gpt4 key购买 nike

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

最佳答案

你应该去掉顶部边框,即

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

代替

border: 1px solid #ccc;

关于css - 如何删除CSS下拉菜单中的重叠线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10850496/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com