我正在用子导航做导航栏，我从下面的代码得到的结果是当我悬停主链接时，子菜单没有出现在主链接的正下方。如果您单击产品链接，您可以看到它位于主页链接下，我希望产品子菜单显示在产品链接下，并在产品中 p 开始的位置对齐。 2.也有人可以告诉我为什么有子菜单的链接在下一个链接之间创建空间。在此示例中，主页和产品之间有一个空格，但联系我们和付款之间没有空格。无论主菜单是否包含子菜单，如何忽略链接之间的空格？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<link rel="stylesheet" href="navigation.css" type="text/css">
<!-- <link rel="stylesheet" href="navi.css" type="text/css"> -->
</head>
<body>
<div class="navigation">
<ul>
<li>
<a href="#">Home</a>
<ul>
<li><a href="#">Hello</a></li>
<li><a href="#">Hi</a></li>
<li><a href="#">About us</a></li>
</ul>
</li>
<li><a href="new 2.html">Products</a>
<ul>
<li><a href="#">Printing</a></li>
<li><a href="#">Scanning</a></li>
</ul>
</li>
<li><a href="sidebarright.html">Contact</a></li>
<li><a href="sidebarright.html">Payment</a></li>
</ul>
</div>
</body>
</html>
CSS:
.navigation{ width:400px;margin:0; padding:0;}
.navigation li{
display:inline;
}
.navigation li a{
color:white;
padding:.2em 1em;
background-color:black;
text-decoration:none;
font-size:20px;
background-color:black;
border-right:1px white solid;
}
.navigation li a:hover{background-color:#eee;border-top:2px solid #ddd;color:#333;}
.navigation li ul {
position: absolute;
display: none;
width: inherit;
}
.navigation li:hover ul {
display:block;
width:100px;
margin: 4px 0 0 -20px;
}
.navigation li:hover ul li{
position: relative;
list-style-type:none;
float:left;
}
.navigation li:hover ul li a{
display:block;
width:100px;
float:left;
color:red;
padding:.2em 1em;
background-color:#eee;
border-bottom:thin black solid;
}
最佳答案
将 position:relative 添加到您的 li 中，然后为子菜单赋予 left 值，以便子菜单位于正确的父菜单下。
此外，如果您不希望菜单项之间有空格，请在 li 上使用 float:left 而不是 display:inline。你仍然可以看到一个小的空白区域，那就是你在 .navigation li a
border-right
关于html - 子导航 css- 在悬停位置显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30120766/