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

您必须进行一些小的更改，它将作为垂直方式工作。当你想要添加更多样式时，你可以轻松地完成它。

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

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

如何创建垂直导航菜单？

1 个答案: