Question

大家好，我试图让这个效果是当你将鼠标悬停在li的任何部分时，onhover效果会像这个网站一样生效： http://ironsummitmedia.github.io/startbootstrap-landing-page/ 顶部菜单嗯这是我的代码：

<head>
    <style>
        #mody { position:absolute;
 width:100%;
 height:60;
 z-index:15;
 top:0%;
 left:0%;
 background:red;}

 #logo {
    margin-left:250px;
    margin-top:5px;
 }

 #first_nav {
    position:absolute;
    top:0px;
    left:1100px;
    padding:5px;

 }
 #first_nav ul {
    text-decoration:none;
    list-style:none;
    height:inherit;
 }
 #first_nav ul li {
    display:inline;
    margin-right:0px;
    padding:5px;
    float:left;
    background:yellow;
 }
#first_nav ul li a {
    padding:10px;
    text-decoration:none;

}
#first_nav ul li a:hover {
    color:pink;
}
    </style>
</head>


<body>


        <div id='mody'>
            <div id='logo'>
                <a href="#"><img src="mody.jpg" width="50px" height="50px" alt="title"/></a>
            </div>

            <div id="first_nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">DADA</a></li>
                </ul>
            </div>

        </div>




</body>

P.S。如果有任何更多的想法是如何使我的菜单更好或更好的代码行随意写它我接受所有的批评感谢您阅读

Answer 1

要使某些内容占用HTML中的整行，请将其显示为块：

#first_nav ul li a {
  display: block;
}

Answer 2

把浮动：放在a而不是li上。添加display：inline-block也是一个元素。这样，整个元素都是可点击的，而不仅仅是它的一部分。

例如：

ul { list-style: none; overflow: auto;}

li {background: #ccc; }

.foo li {
  float: left;
  padding: 30px;
  border: 1px solid blue;
  }

.bar a {
  float: left;
  padding: 30px;
  border: 1px solid blue;
  }

.foo li:hover, .bar a:hover {
  background: yellow;
  }

On this one, only the text is clickable, even though the box looks clickable.
<ul class="foo">
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  </ul>
<hr style="float:none;">
On this one, the whole box is the link:

<ul class="bar">
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  <li><a href="#">Click Me</a></li>
  </ul>

如何制作<a> have full width in a <li> in a navigation menu?</li></a>

2 个答案: