Question

我的导航栏看起来不错：link

<ul>
     <li><a class="active" href="#home">Home</a></li>
     <li><a href="#news">News</a></li>
     <li><a href="#contact">Contact</a></li>
     <li><a href="#about">About</a></li>
   </ul>

添加悬停效果后，元素似乎已经获得了一个不可见的额外px，如下所示：link

<ul>
     <li><a class="active her-buzz-out" href=" #home">Home</a></li>
     <li><a class="her-buzz-out" href="#news">News</a></li>
     <li><a class="her-buzz-out" href="#contact">Contact</a></li>
     <li><a class="her-buzz-out" href="#about">About</a></li>
   </ul>

它们不再适合，任何将它们稍微向右移动的尝试都会导致最远的元素折叠到下面的行...使用绝对位置不会是一个选项，因为我需要它是相对的。关于如何使元素适当的任何想法？

css是在js小提琴页面，不幸的是效果库在我的电脑上，所以我只能描述错误......

Answer 1

请试一试！

＆＃13;

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    width: 265px;
    height: 2.45em;
    margin: 5em;
    border-radius: 500px;
    background-color: #4da6ff;
}

li {
    float: left;
}

li a {
    position: relative;
    top: 10px;
    left: 1px;
    color: #4da6ff;
    text-decoration: none;
    padding: 8.5px 11px;
    margin-left:2px;
    width: 40%;
    border-radius: 500px;
    background-color: #ffffff;
  transition:all 400ms linear;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #e6e6e6;
    padding: 14px 20px;
}

 .active {
    background-color: #ffffff;
    color: #4da6ff;
}
.out {
    float: left;
    width: 100%;
    overflow: hidden;
    height: 100px;
}
.out {
    float: left;
    max-width: 70px;
    overflow: hidden;
    height: 100px;
    width: 100%;
}
li a:hover .out{
      max-width: 70px;
}

＆＃13;

<ul>
     <li><div class="out"><a class="active her-buzz-out" href=" #home">Home</a></div></li>
     <li><div class="out"><a class="her-buzz-out" href="#news">News</a></div></li>
     <li><div class="out"><a class="her-buzz-out" href="#contact">Contact</a></div></li>
     <li><div class="out"><a class="her-buzz-out" href="#about">About</a></div></li>
   </ul>

＆＃13;

添加效果后，导航栏元素会折叠到下面的行

1 个答案: