Question

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

这是JSfiddle with the code

Answer 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}}

Answer 2

请从＆＃39; #cssmenu ul ul＆＃39;删除 left：99％; 并替换为以下代码：

#cssmenu ul ul{
    /* left: 99%; Remove this*/
    margin-top: 1px;
    position: absolute;
    top: 30px;
    visibility: hidden;
    width: 100%;
    z-index: 598;
}

Answer 3

这是一个更新的fiddle，子菜单顶部空间相对于主菜单高度：

#cssmenu ul ul {
  margin-top: 1px;
  visibility: hidden; 
  position: absolute;
  top: 100%;
  z-index: 598;
  width: 100%;
}

Answer 4

将display:inline-block;中的#cssmenu ul li和left: 99%;中的left: 10%;移至#cssmenu ul ul

DEMO

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

4 个答案: