我从网站(purecss.menus.com)下载了CSS下拉菜单。它从垂直菜单开始,当您将鼠标悬停在上方时,子菜单显示在菜单的右侧。我已将主菜单更改为水平显示。但我不确定要更改CSS代码的哪一部分,以便子菜单垂直显示在菜单项下。我已尝试更改ul ul
,ul li ul
等的宽度,位置和显示属性,但似乎无法使其正常工作。
答案 0 :(得分:1)
此处有#cssmenu ul ul
更新为#cssmenu ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 37px;
left: -20px;
z-index: 598;
width: 100%;
}
请注意,当您将背景更改为白色以外的其他内容时,您会看到小箭头,由于新位置,该箭头看起来有点奇怪。
{{1}}
答案 1 :(得分:0)
请从' #cssmenu ul ul'删除 left:99%; 并替换为以下代码:
#cssmenu ul ul{
/* left: 99%; Remove this*/
margin-top: 1px;
position: absolute;
top: 30px;
visibility: hidden;
width: 100%;
z-index: 598;
}
答案 2 :(得分:0)
这是一个更新的fiddle,子菜单顶部空间相对于主菜单高度:
#cssmenu ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 100%;
z-index: 598;
width: 100%;
}
答案 3 :(得分:0)
将display:inline-block;
中的#cssmenu ul li
和left: 99%;
中的left: 10%;
移至#cssmenu ul ul