我正在尝试创建一个导航菜单,当将鼠标悬停在某个元素上时该菜单会显示边框。虽然它目前看起来不错,但当将鼠标悬停在一个元素上时,其他菜单项将被推开。我将如何让他们留在原地?
我尝试了几种方法,但都没有奏效。
我在下面包含了一个 fiddle 。
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style:none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 1px;
padding: 5px 40px;
color: white;
line-height: 1.3em;
}
li a:hover {
border: solid 1px black;
padding: 5px 10px;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">LIVE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
最佳答案
因为您要在悬停时添加填充。将填充从悬停移动到 anchor 。
li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
关于html - CSS 菜单在悬停时移动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47213145/