如何创建垂直导航菜单？

Question

这是使用HTML和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

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

点击这里查看小提琴

#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*/
}

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