导航栏有问题（再次）。只有将鼠标悬停在 li 的中心上才能点击 li，而不是底部的顶部......我尝试切换 LI 和 As，因此：
<a><li></li></a>
但这也不起作用...
谢谢水螅
请参阅：http://jsfiddle.net/rksyqf37/
.HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<ul id="nav">
<a href="li1.html"><li title="li1">li1</a></li>
<a href="li2.html"><li title="li2">li2</a></li>
<a href="li3.html"><li title="li3">li3</a></li>
<a href="li4.html"><li title="li4">li4</a></li>
<a href="li5.html"><li title="li5">li5</a></li>
<a href="li6.html"><li title="li6">li6</a></li>
<a href="li7.html"><li title="li7">li7</a></li>
<a href="li8.html"><li title="li8">li8</a></li>
</ul>
</body>
</html>
.CSS：
body {
background-image: url("http://static.tumblr.com/97f4b171db68d6ef1836c8fcb9a1c1a3/oi8jcug/xIcn5vql3/tumblr_static_aajc47nn2ds8c0k004gskoo0c.jpg");
background-repeat: no-repeat;
background-size: cover;
padding: 0px;
margin: 0px;
}
#nav {
height: 50px;
line-height: 50px;
background-color: #1C1C1C;
font-size: 0px;
text-decoration: none;
width: 100%;
text-align: center;
font-family: sans-serif;
}
#nav li {
display: inline-block;
font-size: 25px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-right: 1px solid white;
height: 50px;
}
#nav li:first-child {
border-left: 1px solid white;
}
#nav li:hover {
border-bottom: 2px solid white;
}
#nav a {
color: white;
text-decoration: none;
margin: 0px;
padding: 0px;
}
如
前所述，您的HTML标签<a>和<li>放置错误。但是对于您的第一个问题，您只需将display: inline-block;添加到a选择器中即可。顺便说一句，从li中删除填充并将其添加到您的a.
不能将li标签与其他标签包装在一起。 li标签应全部为ul或ol直接跟随标签。
而且您无法单击a，因为它默认是内联标签。这就是为什么您必须添加内联块属性，该属性允许内联中的最佳和块中的最佳;)
更新的 JSFIDDLE
HTML
<ul id="nav">
<a href="li1.html"><li title="li1">li1</li></a>
<a href="li2.html"><li title="li2">li2</li></a>
<a href="li3.html"><li title="li3">li3</li></a>
<a href="li4.html"><li title="li4">li4</li></a>
<a href="li5.html"><li title="li5">li5</li></a>
<a href="li6.html"><li title="li6">li6</li></a>
<a href="li7.html"><li title="li7">li7</li></a>
<a href="li8.html"><li title="li8">li8</li></a>
</ul>
结束标签是错误的，它应该
</li>后跟</a>但它是</a></li>
更新的小提琴
我们可以使用 Jquery 为 LI 项添加一个点击事件，如下所示。为此，请在 LI 项中添加锚标记
$(document).ready(function() {
$("#nav li:has(a)").click(function() {
window.location = $("a:first",this).attr("href");
});
});
<ul id="nav">
<li title="li1"><a href="li1.html">li1</a></li>
<li title="li2"><a href="li2.html">li2</a></li>
<li title="li3"><a href="li3.html">li3</a></li>
<li title="li4"><a href="li4.html">li4</a></li>
</ul>
你有错误的html：<a><li></a></li>而不是<li><a></a></li>。