如何创建固定子菜单（下拉框应永久显示）

Question

我有一个菜单和一个子菜单。仅当将鼠标悬停在子菜单上时，才会显示该子菜单。问题1：我希望它永久显示。问题2：我希望它水平显示（而不是像现在那样垂直显示）。要明白我的意思，去http://appartement-met-zeezicht.be并停留在“英语”上。“英语”项下显示的内容应以水平（而非垂直）方式永久性地显示。谢谢！！

/子菜单/

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

Answer 1

您可能需要这样的东西：

css prettyprint-override">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>

Answer 2

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

Answer 3

编辑：似乎有些Javascript正在覆盖CSS，您可以尝试将其添加到样式中。css:

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

第二个问题：在你的style.css找到下面的部分 /MENU/和 /SUBMENU/.删除这些注释下面的下一行并粘贴此代码：

/*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;}