菜单列表项顶部的标记

Question

当我将鼠标悬停在菜单列表项上时，如何创建一个显示在菜单列表项顶部的标记？就像他们拥有的那样 here。可以只用 css 创建吗？

编辑：我不需要你的代码，我只是想要一些提示，因为我不知道从哪里开始。

Answer 1

如果您有一个简单的导航：

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

...然后您可以使用 :hover CSS 伪 class:

创建基本的悬停效果

ul li a:hover {
  border-top: 2px solid black;
}

Answer 2

如果我们只是在谈论 CSS，请查看 :hover 伪 class。

这可以与 visiblity 结合创建如下内容：

span {
    visibility: hidden;
    font-weight: bold;
}
p:hover span {
    visibility: visible;
}

<p><span>| </span>hello</p>

Answer 3

只尝试这个 CSS:

CSS

    .menu-wrap {
    overflow: hidden;
    width: 100%;
    height: auto;
    position:relative;
}
.menu-wrap div{
    position:relative;
    margin-top:100px;
    display:inline-block;
    border:2px solid red;
    width:100px;
    height:10px;
    padding:10px;
    }
.menu-wrap div:hover:before{
    content:'|'; /*--------you can put image here as marker*/
    position:absolute;
    bottom:40;
    font-size:1.3em;
    margin-left:50px;
    font-weight:bold;
}

HTML

<div class="menu-wrap">              
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
</div>

看看是不是你想要的

Answer 4

这是您想要实现的目标的最小示例。最重要的部分是 :before 伪元素和 <a> 的 position: relative。请注意那些 "markers" 的宽度是你的伪元素的 width 属性。（在本例中为 2px）。这里是CSS-marker伪元素的一部分。

a:hover:before {
    content:"";
    width: 2px;
    height: 20px;
    background: #000;
    position: absolute; /* Only works well when the parent is 'position:relative' */
    left: 50%;
    top: -10px;
}

最小示例片段

html * {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
ul > li {
  display: inline-block;
}
li > a {
  padding: 5px 10px;
  position: relative;
}
a:hover:before {
  content: "";
  width: 2px;
  height: 20px;
  background: #000;
  position: absolute;
  left: 50%;
  top: -10px;
}

<ul>
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 2</a>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href="#">Item 4</a>
  </li>
  <li><a href="#">Item 5</a>
  </li>
</ul>

菜单列表项顶部的标记

Marker on top of the menu list items

css

menu

nav

marker