将CSS垂直下拉菜单更改为水平

时间:2014-07-01 10:20:01

标签: html css drop-down-menu

我从网站(purecss.menus.com)下载了CSS下拉菜单。它从垂直菜单开始,当您将鼠标悬停在上方时,子菜单显示在菜单的右侧。我已将主菜单更改为水平显示。但我不确定要更改CSS代码的哪一部分,以便子菜单垂直显示在菜单项下。我已尝试更改ul ulul li ul等的宽度,位置和显示属性,但似乎无法使其正常工作。

这是JSfiddle with the code

4 个答案:

答案 0 :(得分:1)

此处有#cssmenu ul ul更新为#cssmenu ul ul { margin-top: 1px; visibility: hidden; position: absolute; top: 37px; left: -20px; z-index: 598; width: 100%; }

的更新JSFiddle

请注意,当您将背景更改为白色以外的其他内容时,您会看到小箭头,由于新位置,该箭头看起来有点奇怪。

{{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 lileft: 99%;中的left: 10%;移至#cssmenu ul ul

DEMO