悬停菜单 - 活动菜单 - CSS

Question

我第一次使用 coda slider 制作了一个 jquery 滑块。

但我想自定义菜单，我想要一个小箭头，当您将其悬停并且它处于活动状态时，它会显示在 li a 的顶部。

我将如何做到这一点？我应该使用图像吗？或者我可以使用css3实现效果吗？

<ul class="navigation">
<li><a href="#sites">Sites</a></li>
<li><a href="#files">Files</a></li>
<li><a href="#editor">Editor</a></li>

<style>
.navigation {
padding:0px;
margin-bottom:90px;
}

ul.navigation li {
list-style-type:none;
}

ul.navigation li a {
text-decoration:none;
float:left;
width:254px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:40px;
}

ul.navigation li a:hover {
background-color:#666;
  /*there should be some sort of background image here or css3? */
}

.active {
   /*there should be some sort of background image here or css3? */
}
<style>

Answer 1

   ul.navigation li a:active {  }

Answer 2

.selected:hover {
  /* you can use CSS3 to make arrows or image both */
}

分析后，我观察到，该插件将.selected 类添加到被选中的li 元素中。因此，您还可以使用 CSS3 来制作箭头，使用 :after 和 :before 伪类与 display:none 并仅在 .selected 悬停时显示。

Answer 3

ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
    /* do whatever */
}

以防万一您有子菜单，我使用了直接后代选择器 (>)。