【问题标题】：How to create a FIXED submenu (the dropdown menu should be displayed permanently)如何创建 FIXED 子菜单（下拉菜单应永久显示）
【发布时间】：2017-04-21 02:24:59
【问题描述】：

我有一个菜单和一个子菜单。只有将鼠标悬停在其上时才会显示子菜单。问题 1：我希望它永久显示。问题 2：我希望它水平显示（而不是像现在这样垂直显示）。要了解我的意思，请转到 http://appartement-met-zeezicht.be 并将鼠标悬停在“英语”上。 “英文”下显示的内容应永久显示，最好以水平（而不是垂直）方式显示。非常感谢！！

/子菜单/

topmenu ul li ul{ position:absolute;width:150px; z指数：999999；填充左：0；左边距：-10px；边距顶部：24px；显示：无；}

topmenu ul li ul li{ float:none;边距：0；填充：10px 0px；文本对齐：居中；背景：#302f2f url(images/pattern.png) 重复；显示：块；边框底部：1px 实心 #333;高度：自动；}

topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) 重复;}

topmenu ul li ul li a{ font-size:14px;字体粗细：正常；填充：4px;}

topmenu ul li ul li ul{left: 100%;边距顶部：-27px；浮动：无；左边距：0px;}

.tinynav, .tinynav1{ 显示：无；}

【问题讨论】：

显示一些代码或者你做了什么？也许是小提琴？

标签： css drop-down-menu hover fixed submenu

【解决方案1】：

编辑：似乎有些 Javascript 覆盖了 CSS，您可以尝试将其添加到 style.css：

#topmenu ul li ul, #topmenu li:hover > ul {
    display: block !important;
}

第二个问题：在你的 style.css 中找到 /MENU/ 和 /SUBMENU/强>。删除这些 cmets 下面的下一行并粘贴此代码：

/*MENU*/
#menu_wrap{width:100%; float:left; background:#302f2f url(images/menu_wrap.png) repeat;}
.is-sticky{ width:1000px!important;}
#topmenu{text-align:center;}
.menu-header{margin:auto; padding:0; display:block;}
#topmenu ul{ margin:0; padding:0;}
#topmenu ul li{list-style-type:none; display:inline-block; margin-top:0px;padding:25px 15px;}
#topmenu li a{ font-size:18px; color:#fff;}
#topmenu ul > li:hover{  background:url(images/transblack.png) repeat;}
#menu-icon{display:none;}

/*SUBMENU*/
#topmenu ul li ul{ position:absolute;width:auto; z-index:999999;  padding-left:0; margin-left:-10px;  margin-top:24px; display:none;}
#topmenu ul li ul li{ float:left; margin:0; padding:10px 0px; text-align:center; background:#302f2f url(images/pattern.png) repeat;  display:block; border-bottom: 1px solid #333; height:auto;}
#topmenu ul > li ul li:hover{ background:#2bb975 url(images/pattern.png) repeat;}
#topmenu ul li ul li a{ font-size:14px; font-weight:normal; padding:4px;}
#topmenu ul li ul li ul{left: 100%; margin-top:-27px; float:none; margin-left:0px;}

【讨论】：

感谢您这么快地帮助我！由于我是一个 PC-dummy，我不知道如何访问我的 wordpress 网站（Theron Lite）的 css 以删除“显示：无”。由于“添加自定义 css”插件，我现在才知道如何“否决”事情。你能建议我在这个插件中添加一些东西吗？或者你能告诉我去我这边的css文件的路吗？非常感谢！！
您的 WordPress wp-content/themes/theron-lite 文件夹中有一个样式、css。使用 FTP 将文件下载到您的硬盘驱动器，使用文本编辑器打开它，将我的代码粘贴到文件中，保存并再次使用 FTP 上传。
哇，太棒了！！现在我终于可以访问这个 style.css 文档了！多亏了像你这样的专家，我的傻瓜变得更聪明了，非常感谢！！添加您建议的代码不起作用，但现在我编辑了我的问题并添加了 css 代码，也许现在更容易提供帮助？
欢迎。我现在纠正了我的代码 sn-p 中的错误输入，但是仍然涉及一些 Javascript，并且通过将鼠标悬停在 out 子菜单闪烁。
它有效！！！！不要担心闪烁，它的不完美让生活变得非常特别:-)。我很高兴你能帮助我！

【解决方案2】：

您需要删除“悬停”此列表。并使这个列表“显示：内联块；”

【讨论】：

感谢您这么快地帮助我！由于我是一个 PC-dummy，我不知道如何访问我的 wordpress 网站 (Theron Lite) 的 css。由于“添加自定义 css”插件，我现在才知道如何“否决”它。你能建议我在这个插件中添加一些东西吗？或者你能告诉我去我这边的css文件的路吗？非常感谢！！
你需要在你身边做。例如，您可以在 fiddle 或 codepen 中显示您的代码，我们将对其进行更改。

【解决方案3】：

你可能需要这样的东西：

ol {
      display: inline-block;
    vertical-align: top;
}

li {
    display: inline-block;
    margin-right: 10px;
    width: 60px;
    cursor: pointer;
    vertical-align: top;
}

<div>
  <ol>Spiderman</ol>
  <ol>Wolverine</ol>
  <ol>The Avengers <br>
    <li>Iron Man</li>
    <li>Captain America</li>
    <li>Thor</li>
    <li>Black Widow</li>
  </ol>
</div>

【讨论】：