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

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>

最佳答案

您必须进行一些细微的更改，它将垂直运行。当您寻找更多样式添加时，就可以轻松完成。


  检查这个小提琴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*/
}

我在评论中写了具体更改以实现所需的内容。您可以操纵更多

关于javascript - 如何创建垂直导航菜单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19462549/