悬停时的内联子菜单
这是我目前的菜单：
这就是我想要的：
第一个子菜单是内联的，孩子是下拉列表。
我正在尝试将ul li a display更改为inline-block，但似乎根本无法正常工作。我怎么做才能让子菜单悬停内嵌，子菜单下拉列表的孩子？
非常感谢你。
#info {
top: 8%;
color: #fff;
height: auto;
font-family: arial;
left: 0px;
position: absolute;
width: 72px;
z-index: 40;
border-radius: 4px;
background: dimgrey;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: inline;
}
nav ul li {
position:relative;
width:70px;
}
nav ul li:hover {
background: #4b4b4b;
}
nav ul li:hover a {
color: #fff;
}
nav ul li:hover button{
color: #fff;
}
nav ul li a {
display: block;
padding: 12px 20px;
color: #757575;
text-decoration: none;
}
nav ul li button{
display: block;
padding: 12px 25px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top:0;
left:100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 12px 25px;
color: #fff;
}
nav ul ul li button{
padding: 12px 25px;
color: #fff;
height: 50px; width: 100px; margin-bottom: 2px; font-size: 18px;
}
nav ul ul li a:hover {
background: #4b4b4b;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.menu-container {padding: 19px 0; width: 70px; float: left;}
.clear {clear: both;}
ul{list-style:none;
border:0;outline:none;margin:0;padding:0;}
/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative; /* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 20px 12px 20px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li button {
display: block;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
} <div id="info">
<!--
<li><button id="FreehandPolyline">Freehand Polyline</button></li>
<li><button id="Triangle">Triangle</button></li>
<li><button id="Extent">Rectangle</button></li>
<li><button id="Circle">Circle</button></li>
<li><button id="Ellipse">Ellipse</button></li>
<li><button id="Polygon">Polygon</button></li>
<li><button id="FreehandPolygon">Freehand Polygon</button></li> -->
<!-- <div id="menu_plotting" >Menu plotting</div> -->
<nav class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li>
<a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a>
<ul>
<li><a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a>
<ul>
<li>
<a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;">
<img src="assets/icon/arrow0.png" width="30" height="30"></a>
<!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;">
<img src="icon/arrow.png" width="30" height="30"></a> -->
</li>
<li>
<a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;">
<img src="assets/icon/bawah.png" width="30" height="30"></a>
</li>
<li>
<a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li><a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a>
<ul>
<li><a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30">
</a>
</li>
<li><a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a></li>
</ul>
</li>
<li><a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a>
<ul>
<li><a title="Polygon" id="Polygon" onClick="urlicon('polygon','')">
<img src="assets/icon/polygon.png" width="30" height="30">
</a>
</li>
<li><a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a></li>
<li><a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a></li>
<li><a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a></li>
<li><a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a></li>
<li><a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a></li>
</ul>
</li>
<li>
<a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a>
</li>
</ul>
</li>
<li><a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a></li>
<li><a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a></li>
<!-- ASOPS -->
<?php } if ($list['asisten']==1 || $list['asisten']==6) {?>
<li>
<a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a>
</li>
<li>
<a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a>
</li>
<li>
<a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a>
</li>
<li>
<a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a>
</li>
<?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?>
<script type="text/javascript">
document.getElementById("info3").style.display = "block";
</script>
<?php
}
}
} ?>
</ul>
</nav>
<div style="font-size: 13px; margin-left: -20px;" id="nm_scen"><?php echo $_SESSION['scen1']; ?></div>
</div>
1 个答案:
答案 0 :(得分：0)
你快到了。您需要为内部UL指定固定宽度，因为默认情况下它的相对位置祖先的宽度为100%，并且该宽度不足以在每行中包含多个项目第二个菜单级别。
nav>ul>li>ul {
width: 291px
}
希望这有帮助。
#info {
top: 8%;
color: #fff;
height: auto;
font-family: arial;
left: 0px;
position: absolute;
width: 72px;
z-index: 40;
border-radius: 4px;
background: dimgrey;
}
nav ul ul {
display: none;
}
nav ul li:hover>ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: inline;
}
nav ul li {
position: relative;
width: 70px;
}
nav ul li:hover {
background: #4b4b4b;
}
nav ul li:hover a {
color: #fff;
}
nav ul li:hover button {
color: #fff;
}
nav ul li a {
display: block;
padding: 12px 20px;
color: #757575;
text-decoration: none;
}
nav ul li button {
display: block;
padding: 12px 25px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 0;
left: 100%;
}
nav ul ul li {
float: none;
position: relative;
display: inline-block;
}
nav ul ul li a {
padding: 12px 25px;
color: #fff;
}
nav ul ul li button {
padding: 12px 25px;
color: #fff;
height: 50px;
width: 100px;
margin-bottom: 2px;
font-size: 18px;
}
nav ul ul li a:hover {
background: #4b4b4b;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav>ul>li>ul>li>ul {
top: 100%;
left: 0;
}
nav>ul>li>ul {
width: 291px
}
.menu-container {
padding: 19px 0;
width: 70px;
float: left;
}
.clear {
clear: both;
}
ul {
list-style: none;
border: 0;
outline: none;
margin: 0;
padding: 0;
}
/* Vertical Mega Menu Styles */
.mega-menu {
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative;
/* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 20px 12px 20px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li button {
display: block;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover,
.mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}<div id="info">
<!--
<li><button id="FreehandPolyline">Freehand Polyline</button></li>
<li><button id="Triangle">Triangle</button></li>
<li><button id="Extent">Rectangle</button></li>
<li><button id="Circle">Circle</button></li>
<li><button id="Ellipse">Ellipse</button></li>
<li><button id="Polygon">Polygon</button></li>
<li><button id="FreehandPolygon">Freehand Polygon</button></li> -->
<!-- <div id="menu_plotting" >Menu plotting</div> -->
<nav class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li>
<a title="Plotting Toolbar"><img src="assets/icon/pencil.png" width="30" height="30"></a>
<ul>
<li>
<a title="Arrows"><img src="assets/icon/arrow.png" width="30" height="30"></a>
<ul>
<li>
<a title="Straight Arrow" onClick="urlicon('arrow','')" style="cursor: pointer;">
<img src="assets/icon/arrow0.png" width="30" height="30"></a>
<!-- <a id="a" class="btn btn-info" onclick="arrow_('arrow')" style="cursor: pointer;">
<img src="icon/arrow.png" width="30" height="30"></a> -->
</li>
<li>
<a title="Down Arrow" onClick="urlicon('arrow_l','')" style="cursor: pointer;">
<img src="assets/icon/bawah.png" width="30" height="30"></a>
</li>
<li>
<a title="Up Arrow" onClick="urlicon('arrow_a','')" style="cursor: pointer;"> <img src="assets/icon/atas.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Polyline"><img src="assets/icon/polyline-48.png" width="30" height="30"></a>
<ul>
<li>
<a title="Polyline" id="Polyline" onClick="urlicon('polyline','')"><img src="assets/icon/polyline.png" width="30" height="30">
</a>
</li>
<li>
<a title="Freehand Polyline" id="FreehandPolyline"><img src="assets/icon/freepolyline.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Polygon"><img src="assets/icon/polygon.png" width="30" height="30"></a>
<ul>
<li>
<a title="Polygon" id="Polygon" onClick="urlicon('polygon','')">
<img src="assets/icon/polygon.png" width="30" height="30">
</a>
</li>
<li>
<a title="Triangle" id="Triangle"><img src="assets/icon/triangle.png" width="30" height="30"></a>
</li>
<li>
<a title="Rectangle" id="Extent"><img src="assets/icon/rectangle.png" width="30" height="30"></a>
</li>
<li>
<a title="Circle" id="Circle"><img src="assets/icon/circle.png" width="30" height="30"></a>
</li>
<li>
<a title="Ellipse" id="Ellipse"><img src="assets/icon/ellips.png" width="30" height="30"></a>
</li>
<li>
<a title="Freehand Polygon" id="FreehandPolygon"><img src="assets/icon/freepolygon.png" width="30" height="30"></a>
</li>
</ul>
</li>
<li>
<a title="Text" onClick="select_text()"> <img src="assets/icon/font.png" alt="Text" width="30" height="30"> </a>
</li>
</ul>
</li>
<li>
<a title="Radar"><img src="assets/icon/radar.png" width="30" height="30"></a>
</li>
<li>
<a title="Manuver"><img src="assets/icon/airplane.png" width="30" height="30"></a>
</li>
<!-- ASOPS -->
<?php } if ($list['asisten']==1 || $list['asisten']==6) {?>
<li>
<a title="Obstacle" onClick="select_obst()"><img src="assets/icon/obstacle.png" width="30" height="30"></a>
</li>
<li>
<a title="Strength" onClick="select_kekuatan()"><img src="assets/icon/streng.png" width="30" height="30"></a>
</li>
<li>
<a title="Unit" onClick="select_unit()"><img src="assets/icon/icons8-Org Unit-48.png" width="30" height="30"></a>
</li>
<li>
<a title="Situation" onClick="select_situasi()"><img src="assets/icon/warning.png" width="30" height="30"></a>
</li>
<?php if($list['asisten']==6 && $_SESSION['menu_'] == "menu"){ ?>
<script type="text/javascript">
document.getElementById("info3").style.display = "block";
</script>
<?php
}
}
} ?>
</ul>
</nav>
<div style="font-size: 13px; margin-left: -20px;" id="nm_scen">
<?php echo $_SESSION['scen1']; ?>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？