我创建了一个css
带有两个子菜单的垂直导航菜单。
但我不知道如何将它们放在一列中,以便它们正常工作。这可能吗?
html
<ul>
<li><a href="#">works</a>
<ul>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
</ul>
</li>
<li><a href="#">photos</a>
<ul>
<li><a href="#">something</a></li>
<li><a href="#">something</a></li>
</ul>
</li>
<li><a href="#">friends</a></li>
<li><a href="#">contact</a></li>
</ul>
</div></html>
css
#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}
#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul { display:block;
}