[英]Why is a:hover and href links not working in my unordered css list?
好的,出于某种原因,我的href链接和a:hover css函数无法正常工作。 谢谢!
另外,id“ mobNav”用于我的移动导航,因此它不应干扰我的问题。
nav#topTab { float: left; width: 100%; overflow: hidden; } nav#topTab ul { float: left; clear: left; position: relative; list-style: none; margin: 0; padding: 0; left: 50%; } nav#topTab ul li { display: block; float: left; list-style: none; margin: 0; padding: 0; position: relative; right: 50%; } nav#topTab ul li a { display: block; padding: 0 5% 0 5%; margin: 0 15% 0 3%; font-size: 2.2em; background: #fcfcfc; color: #000; text-decoration: none; font-family: 'Gloria Hallelujah'; } nav#topTab ul li a:hover { background: #000; color: #fff; box-shadow: inset 0 0 0 3px #3a7999; }
<nav id="topTab"> <a href="#" id="mobNav"></a> <ul> <li><a href="http://www.example.org/" title="morning delight">morning delight</a></li> <li><a href="http://www.example.org/" title="yesterday">yesterday's leftovers</a></li> <li><a href="http://www.example.org/" title="accelaaaa">accela-meme</a></li> </ul> </nav>
事实证明nav标签应该包含标题元素。 我将html更改为:
<nav id="topTab">
<a href="#" id="mobNav"></a>
<ul>
<li><a href="http://www.example.org/" title="morning delight">morning delight</a></li>
<li><a href="wwww.google.com" title="yesterday">yesterday's leftovers</a></li>
<li><a href="#" title="accelaaaa">accela-meme</a></li>
</ul>
<div>
<img id="navRight" src = "forwardarrow.png" alt="forwards">
<img id="navLeft" src = "backarrow.png" alt="backwards">
</div>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">MemeSlutz</b></h1>
<h2>Dank Rank</h2>
</div>
</nav>
并在导航中包含标头,由于某种原因,该标头的悬浮功能和href起作用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.