这是一个使用 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>
这是一个使用 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>
你必须做一些小的改变,它会垂直工作。当你寻找更多的风格来添加它时,你可以轻松地做到这一点。
检查这个小提琴点击这里
#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*/
}
我在评论中写了具体要改变什么来实现你想要的。你可以操纵更多