如何在css中的navbar-item下面添加一个块

Question

我希望在活动页面下方（并悬停）在导航栏中有一个小块。它应该是这样的：

这是我到目前为止的代码。我认为边框底部需要非常小，厚度很大。

.navbar .navbar-nav > li > a:hover {
color:#008080;
background:rgba(255,255,255, 0.0);
border-bottom: 5px solid rgb(255, 128, 0);

}

我希望有人可以帮忙解决这个问题。

Answer 1

所以我能看到的最好方法是在导航栏中创建一个div 类似的东西：

＆＃13;

＆＃13;

<div class="navbar">
<li>Home
  <div class="square"></div>
  </li>

＆＃13;

＆＃13;

＆＃13;

然后给那个div的样式：

＆＃13;

＆＃13;

.square {
      display:none;
      width:50%;
      margin:0 auto;
      background: orange;
      height:20px;

      }
    .square:hover {
      display:block;
      }

＆＃13;

＆＃13;

＆＃13;

当你将鼠标悬停在广场上时，它应该会出现。 如果您希望将鼠标悬停在整个li标记上时显示，则可能必须使用javascript鼠标悬停事件

这有帮助吗？