javascript - 如何创建垂直导航菜单？

Question

Here is a menu using HTML and CSS. 菜单项水平放置，子菜单使用垂直布局。主菜单项应该如何更改为垂直布局？

<ul>
  <li>
    <a>item1</a>
    <ul>
      <li><a>subitem1</a></li>
      <li><a>subitem1</a></li>
      <li><a>subitem1</a></li>
    </ul>
  </li>
</ul>

Answer 1

你必须做一些小的改变，它就会像垂直的一样工作。当您寻找更多样式添加到它时，您可以轻松地做到这一点。

Check this fiddle CLICK HERE

#menu
{
    width: 120px;/*change width*/
}
#menu li
{

    display: block; /*keep it block*/
    }
#menu ul
{

    top: 0; /*change this */
    left: 100%; /*change this */
}
#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left:-13px; /* change this*/
    top:7px; /* change this*/
    width: 0;
    height: 0;
    border: 5px solid transparent; /* change this*/
    /*border-right: 5px solid transparent;*/ /*don't need this*/
    border-right: 8px solid #444; /* change this*/
}

#menu ul li:first-child a:hover:after
{
    border-right-color: #04acec;  /* change this*/
}

我在评论中写了具体要改变什么来实现你想要的。你可以操纵更多