导航栏-李悬停-点击Link

Question

导航栏出现问题（再次）。鼠标悬停在li的中心时只能点击li，不能在bottom的顶部...我试过切换LIs和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;
}

Answer 1

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>

The Closing tags were wrong it should be </li> followed by </a> but it was </a></li>

Updated Fiddle

Answer 2

如前所述，您的 HTML 标签 <a> 和 <li> 放置错误。但是对于您的第一个问题，您只需将 display: inline-block; 添加到 a 选择器。顺便说一句，从 li 中删除填充并将其添加到您的 a.

您不能将 li 标签与其他标签包装在一起。 li 标签应始终是 ul 或 ol 紧随其后的标签。

而且您无法在 a 周围点击，因为默认情况下它是一个内联标签。这就是为什么你必须添加 inline-block 属性允许最好的内联和最好的块 ;)

upated jsfiddle

Answer 3

我们可以使用Jquery为LI项目添加点击事件，如下所示。为此，在 LI 项目中添加锚标记

  $(document).ready(function() {
     $("#nav li:has(a)").click(function() {
         window.location = $("a:first",this).attr("href");
     });
  });

Answer 4

<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>.

导航栏-李悬停-点击Link

Navigation Bar - Li Hover - Click On Link

html

css

nav

navbar

navigationbar