0
請在這裏看到這jsfiddle demo。當我將鼠標懸停在sub1上時，子菜單覆蓋sub2。如何使子子菜單出現在子菜單的右側，但與sub1（或sub2，如適用）相鄰？我怎樣才能使一個子菜單出現在主菜單旁邊，而不是下面用CSS？
ul.topbar {
\t padding:0;
\t \t \t list-style: none;
\t \t \t background: #f2f2f2;
}
ul.topbar li {
\t \t \t display: inline-block;
\t \t \t position: relative;
\t \t \t line-height: 5vh;
\t \t \t text-align: left;
}
ul.topbar li a {
\t \t \t display: block;
\t \t \t padding: 8px 25px;
\t \t \t color: #333;
\t \t \t text-decoration: none;
\t \t \t white-space: nowrap;
}
ul.topbar li a:hover {
\t \t \t color: #fff;
\t \t \t background: #939393;
\t \t \t white-space: nowrap;
}
ul.topbar li ul.dropdown {
\t \t \t
\t \t \t background: #f2f2f2;
\t \t \t display: none;
\t \t \t position: absolute;
\t \t \t z-index: 999;
\t \t \t left: 0;
}
ul.topbar li:hover ul.dropdown {
\t \t \t display: block; \t /* Display the dropdown */
}
ul.topbar li ul.dropdown li {
\t \t \t display: block;
}
ul.topbar li ul.dropdown {
\t padding:0;
\t \t \t list-style: none;
\t \t \t background: #f2f2f2;
}
ul.topbar li ul.dropdown li {
\t \t \t display: inline-block;
\t \t \t position: relative;
\t \t \t line-height: 5vh;
\t \t \t text-align: left;
}
ul.topbar li ul.dropdown li a {
\t \t \t display: block;
\t \t \t padding: 8px 25px;
\t \t \t color: #333;
\t \t \t text-decoration: none;
}
ul.topbar li ul.dropdown li a:hover {
\t \t \t color: #fff;
\t \t \t background: #939393;
}
ul.topbar li ul.dropdown li ul.dropdown {
\t \t \t min-width: 100px; /* Set width of the dropdown */
\t \t \t background: #f2f2f2;
\t \t \t display: none;
\t \t \t position: absolute;
\t \t \t z-index: 999;
\t \t \t left: 0;
}
ul.topbar li ul.dropdown li:hover ul.dropdown {
\t \t \t display: block; \t /* Display the dropdown */
\t \t \t position:absolute;
}
ul.topbar li ul.dropdown li ul.dropdown li {
\t \t \t display: block;
\t \t \t
}<ul class="topbar">
<li><a href="../index.html">top1</a></li>
<li><a href="#">top2</a></li>
<li> <a href="#" > top3 ▾</a>
\t <ul class="dropdown">
\t \t <li> <a href="#" > sub1 ▸ </a>
\t \t \t <ul class="dropdown">
\t <li> <a href="#" >asfg </a></li>
<li> <a href="#" >hbch </a></li>
<li> <a href="#" >erft </a></li>
<li> <a href="#" >erft </a></li>
<li> <a href="#" >erft </a></li>
</ul>
\t \t </li>
\t \t <li> <a href="#" >sub2 ▸ </a>
\t <ul class="dropdown">
\t <li> <a href="#" >rtiuji </a></li>
<li> <a href="#" >erft </a></li>
<li> <a href="#" >erft </a></li>
<li> <a href="#" >erft </a></li>
<li> <a href="#" >erft </a></li>
</ul>
</li>
\t </ul>
</li>
<li><a href="#">top5 ▾</a>
<ul class="dropdown">
<li><a href="../net-jrf/phys-sci/main.html">Phy</a></li>
<li><a href="../net-jrf/chem-sci/main.html">Chem</a></li>
</ul>
</li>
<li><a href="#">top6</a></li>
</ul>