小弟我想做个下拉菜单，不知道如何做，能帮小弟我看看吗
日期：2014-05-17 浏览次数：20669 次
我想做个下拉菜单，不知道怎么做，能帮我看看吗
我想让"前台接待"和"前台收银"这一级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; }
我想让"前台接待"和"前台收银"这一级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; }
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
