css - 带 child 指示器的垂直下拉菜单

Question

这是一个垂直下拉菜单，但问题是指示符(小箭头)应该显示一个元素(链接)有其他对象(子项)。我想要这样的东西:

这就是我所拥有的

<nav>
    <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
        <li><a href="#">Link5</a>
            <ul>
                <li><a href="#">SubLink1</a></li>  
                <li><a href="#">SubLink2</a>
                     <ul>
                         <li><a href="#">SubSubLink1</a></li>  
                         <li><a href="#">SubSubLink2</a></li>
                     </ul>
                </li>
                <li><a href="#">SubLink3</a></li>
            </ul>
        </li>
        <li><a href="#">Link6</a>
            <ul>
                <li><a href="#">SubLink4</a></li>  
                <li><a href="#">SubLink5</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav
{
    width: 230px;
    padding-top: 8px;
}

nav li a
{
    display: block;
    line-height: 25px;
    border-bottom: 1px solid #d4d4d4;
}

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    position: relative;
} 

nav a:link
{
    color: #718785;
    display: block;
    padding: 7px;
    text-decoration: none;
    font-size: 20px;
}

nav li a:hover
{
    font-weight: bolder;
}

nav li a:active
{ 
    font-weight: bolder;
}

nav a:visited
{
    color: #718785;
    border-bottom: 1px solid #d4d4d4;
}

/*dropdown menu*/
nav ul ul
{
    display: none;
    margin-left: 230px;
    margin-top: -40px;
    float: left;
    height: 0;
    background-image: url('http://i58.tinypic.com/2exvv5i.png');
}

nav ul li:hover > ul
{
    display: block;
    width: 230px;
    height: 40px;

}

nav li > a:after
{
   background-image: url('http://i57.tinypic.com/xcw6f5.png');
   width: 9px;
   height: 6px;
   margin: 10px; 
}

http://jsfiddle.net/5ZEqL/5/

Answer 1

您可以使用 CSS 使用 :before 伪元素以某种方式完成此操作，如下所示:

• 首先将隐藏元素从 ul 更改为 li:

  nav ul ul {
    /*display:none; Remove this*/
  }
  nav ul ul li{
    display:none; /*Add this*/
  }
  

  _{另外不要忘记更改 :hover 事件以显示 li 元素，查看 fiddle}

• 然后使用:before来显示箭头:

  nav ul li > ul:before {
    content:" ";
    display:block;
    width:15px;
    height:15px;
    position:absolute;
    top:10px;
    left:-15px;
    background:url('yourarrow') no-repeat center;
  }
  

检查这个 Demo Fiddle