如何创建垂直导航菜单？

Question

Here is a menu using HTML and CSS. Menu items are placed horizontally and submenus use vertical layout. How should main menu items be changed to be layed out vertically too?

<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

You have to do some minor changes and it will work as vertical. and as you looking some more style to add on it you can do it easily.

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

I wrote in comments what to change specific to achieve what you want. You can manipulate more