我想做个下拉菜单,不知道怎么做,能帮我看看吗
我想让"前台接待"和"前台收银"这一级li横向排列,"预定管理"和"接待管理"这一级li竖向排列应该怎么做?
这样把子菜单的ul放在上一级的li下对吗?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hotel management System</title>
<script type="text/javascript">
function showmenu(topnavid)
{
var menuid=topnavid+"_hidlist";
var menu=document.getElementById(menuid);
menu.style.display=menu.style.display=="block"?"none":"block";
}
</script>
</head>
<body style="position: relative;min-height: 100%; top:0px; background: url('img1.png') repeat-x; color:#000000;margin:0px">
<div style="position: relative; width:100%; margin-top:0px;margin-bottom:0px;">
<div style="clear:both; margin:5px">
<div style="float:right;text-align:right;">
Logout
</div>
</div>
<div class="topnav" style="clear:both; float:left;text-align:left;padding-top:10px;">
<ul>
<li id="topnav_1" onclick="showmenu('topnav_1')"><a href="#">前台接待</a>
<ul id="topnav_1_hidlist" style="display:none;>
<li><a class='menu'>预定管理</a></li>
<li><a class='menu'>接待管理</a></li>
</ul>
</li>
<li id="topnav_2" onclick="showmenu('topnav_2')" ><a href="#">前台收银</a>
<ul id="topnav_2_hidlist" style="display:none; ">
<li><a class='menu'>收银管理</a></li>
<li><a class='menu'>账单管理</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
[解决办法]
li { float:left; }
li li { float:none; display:block; }