如何创建 FIXED 子菜单（下拉菜单应该永久显示）

Question

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

/子菜单/

topmenu ul li ul{ position:absolute;宽度:150px; z-索引：999999；左填充：0；左边距：-10px；边距顶部：24px； display:none;}

topmenu ul li ul li{ float:none; margin:0; padding:10px 0像素；文本对齐：居中；背景：#302f2f url(images/pattern.png) 重复； display:block; border-bottom: 1px solid #333; height:auto;}

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

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

topmenu ul li ul li ul{左：100%；边距顶部：-27px； float:none;左边距：0px;}

.tinynav, .tinynav1{ display:none;}

Answer 1

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

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

第二个问题：在你的style.css中找到/MENU/和下面的部分/子菜单/。删除这些评论下面的下一行并粘贴此代码：

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

Answer 2

您需要删除 "Hover" 此列表。并制作此列表 "display: inline-block;"

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

如何创建 FIXED 子菜单（下拉菜单应该永久显示）

How to create a FIXED submenu (the dropdown menu should be displayed permanently)

css

fixed

hover

submenu

drop-down-menu

topmenu ul li ul{ position:absolute;宽度:150px; z-索引：999999；左填充：0；左边距：-10px；边距顶部：24px； display:none;}

topmenu ul li ul li{ float:none; margin:0; padding:10px 0像素；文本对齐：居中；背景：#302f2f url(images/pattern.png) 重复； display:block; border-bottom: 1px solid #333; height:auto;}

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

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

topmenu ul li ul li ul{左：100%；边距顶部：-27px； float:none;左边距：0px;}