有没有更简单的方法，初学者可以理解？答案

【问题标题】：Is there an easier way, that would be understandable for beginners?有没有更简单的方法，初学者可以理解？
【发布时间】：2016-06-22 11:18:37
【问题描述】：

我发现这个菜单显示底部边框，我想学习怎么做，但我不明白它是怎么做的，有没有更简单的方法来实现同样的事情？这是网址：https://codepen.io/atomas/pen/zBoEZe?editors=1100

HTML：

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>

CSS：

$elementsNumber: 4; 
$width: 1/$elementsNumber;


* {
  box-sizing: border-box;
}

ul { 
  position: relative;
  margin: 50px auto;
  width: 80%;
  padding: 0;
  list-style: none;
  color: #000;
  overflow: auto;
  overflow: hidden;

  li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    width: percentage($width);
    text-align: center;
    cursor: pointer;
    border-bottom: 4px solid #555;



  }
      .bar:before {
      overflow: hidden;
      content: "";
      position: absolute;
      top: 54px;
      bottom: 0;
      transition: all 0.25s;
      left: 0;
      width: percentage($width);
      height: 4px;
      background: red;
    }


}

@for $i from 1 through $elementsNumber {

    li:nth-child( #{$i} ) {
      &.selected~.bar:before,
      &.elm:hover~.bar:before,      
      &.selected.bar:before,
      &.elm.bar:hover:before
       {
        left: percentage( ( $i - 1 ) * $width );
      }
    }

}

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。

标签： html css menu hover

【解决方案1】：

* {  box-sizing: border-box;}
ul { 
  padding: 0;
  list-style: none;
  color: #000;
  }
li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    text-align: center;
  
    border-bottom: 4px solid #555; 
    transition: all 0.3s;
}
li:hover {
    border-bottom: 4px solid red;
}

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>

【讨论】：

谢谢这就是我一直在寻找的，你知道如何在悬停时添加动画吗？对不起，如果我要求太多：D
实现同样的事情似乎没有更简单的方法

【解决方案2】：

如果您只想在菜单的底部上添加一个边框，您可以使用border-bottom:

body, html {
    margin: 0;
    padding: 0;
}
header {
    background-color: #eee;
}
ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    border-bottom: 5px solid #ccc;
}
ul>li {
    display: inline-block;
    padding: 0 15px 0 15px;
    margin-left: -4px;
}
ul>li:first-child {
    margin-left: 0;
}
ul>li>a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 5px 0 5px 0;
}
ul>li:hover {
    border-bottom: 5px solid #555;
    margin-bottom: -5px
}

<header>
    <nav>
        <ul>
            <li class="active"><a href="#" title="Home">Home</a>
            </li>
            <li><a href="#" title="About">About</a>
            </li>
            <li><a href="#" title="Contact">Contact</a>
            </li>
        </ul>
    </nav>
</header>

【讨论】：

对不起，但这不是我要找的，我想要和链接一样的东西，不仅仅是 ul 底部的边框，但无论如何谢谢：D
那你想要什么做？底部还有什么边框？你的意思是那个选中的？
li 底部的边框，所以当我将鼠标悬停在 li 上时，它会在您制作的灰色上显示红线...

【解决方案3】：

css 不仅仅是在底部添加边框。

你在底部看到的灰色边框是通过：

li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    width: percentage($width);
    text-align: center;
    cursor: pointer;
    ***border-bottom: 4px solid #555***;
  }

但是，css 还添加了一个组件，该组件突出显示正在悬停的特定 li 元素，以使边框底部变为红色。

顶部的 width 属性只是确保每个 li 元素在浏览器中水平获得相等的空间：

$elementsNumber: 4; 
$width: 1/$elementsNumber;

为了实现与您的 codepen 所示相同的红色悬停，您需要编写一些 css，例如 li:hover 等来模拟相同的效果。

您拥有的 css 肯定比它需要的更复杂，但可以达到预期目的。看看这里的w3schools 链接应该可以帮助您了解 CSS 中的悬停属性和其他有用的属性。

希望这有帮助！

【讨论】：

谢谢，帮了大忙：D