メニューバーがあります。メニューバーは水平です。次に、ホバーするとサブメニューが垂直方向に拡張されます。このサブメニューの項目には、サブジェクトの管理、手動クロール、クロール間隔、およびアーカイブリストが含まれます。マウスを[サブジェクトの管理]に合わせると、右側に別のドロップダウンリストが表示され、サブサブメニューが作成されます。ただし、このサブサブメニューを右側に表示することはできます。そのオーバーラップ私のサブメニュー。私はCSSに本当に慣れていないので、これについては間違いなく助けが必要です。#menu ul li ul li ul、#menu ul li ul li:hover ul、#menu ul li ul li:hover ul li、#menu ul li ul li ul li a:hoverを編集していないような気がします。ありがとうございました。
HTML
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li><a href="#" >Manage Subject</a></li>
<ul>
<li><a href="#">Add Subject</a></li>
<li><a href="#">Edit Subject</a></li>
<li><a href="#">Delete Subject</a></li>
<li><a href="#">Export Subject</a></li>
</ul>
<li><a href="#">Manual Crawl</a></li>
<li><a href="#">Crawl Interval</a></li>
<li><a href="#">Archive List</a></li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background-color:#000;
text-align: center;
z-index:1;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu ul li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu ul li a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul li ul {
display: none;
width: 150px; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px;
}
#menu li li a{
height: 35px;
width: 150px;
float: left;
text-decoration: none;
padding: 0px;
margin: 0 0px;
color: #fff;
text-align: center;
}
#menu ul li ul li a:hover{
background: rgba(255,255,255,0.5);
width:150px;
float:left;
}
#menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
#menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
#menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
#menu ul li ul li ul li a:hover{
background-color: rgba(28,28,240,0.5);
width:150px;
float:left;
}