怎么做.css下拉菜单

来源：互联网发布：深圳软件开发工资标准编辑：程序博客网时间：2024/04/27 22:42

<!DOCTYPE   html   PUBliC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html   xmlns="http://www.w3.org/1999/xhtml"   lang="zh-CN">
<head>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />
<title>css菜单演示</title>
    <style type="text/css">
    /* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu
{
font-family: arial, sans-serif;
width:778px;
height:1px;

position:absolute;
margin-top:0px;
text-align: center;

}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul
{
text-align:center ;
padding:0;
margin:0;
list-style-type: none;

}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li
{
float:left;
position:relative;
top:-14.5px;
        left:0px;
        width: 87px;
        text-align:center;
        margin-top:0px;
    }
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited
{
border-left: 0 solid #000;
        border-right: 1px solid #000;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        text-align:center;
        display:block;
        text-decoration:none;
        width:87px;
        color:#fff;
        background:#588DD9;
        line-height:20px;
        font-size:11px;
        padding-left:0px;
            padding-right:0px;
            padding-top:0px;
            margin-top:0px;
        height: 20px;
    }
/* make the dropdown ul invisible */
.menu ul li ul
{
text-align:center;
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a
{
text-align:center;
color:#000;
background:#588DD9;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul
{
text-align:center;
display:block;
position:absolute;
top:30px;
left:0;
width:87px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a
{
text-align:center;
display:block;
background:#588DD9;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover
{
text-align:center;
background:#588DD9;
color:#000;
}
</style>
<style type="text/css">
    /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
.table {
border-collapse:collapse;
margin:0;
padding:0;
    }
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
text-align:right;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#000;
background:#b3ab79;

}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul
{
display:block;
position:absolute;
top:35px;
left:0;
width:87px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a
{
background:#588DD9;
color:#fff;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#588DD9;
color:#000;
}
    #form1
    {
        height: 290px;
    }
    #header1_date
    {
    margin-bottom:778px;
        text-align:center;
    }
    </style>
</head>
<body>
<div class="menu" style="text-align:center ; width: 821px; left: 271px; top: 224px;">
<ul><li><a class="hide" href="Index.aspx">首页</a>


</li><li><a class="hide">生活信息查询</a>
    <ul>
    <li><a href="Bank.aspx" title="银行信息">银行信息</a></li>
    <li><a href="Meal.aspx" title="餐饮信息">餐饮信息</a></li>
    <li><a href="Hospital.aspx" title="医院信息">医院信息</a></li>
    <li><a href="Market.aspx" title="商场管理">商场信息</a></li>
    <li><a href="View.aspx" title="旅游景点信息">旅游景点信息</a></li>
    <li><a href="School.aspx" title="学校信息">学校信息</a></li>
    </ul>

</li>

<li><a class="hide">公交信息管理</a>
    <ul>
    <li><a href="Bus.aspx" title="房产信息管理">公交路线</a></li>
    <li><a href="BusLight.aspx" title="住户信息管理">红绿灯</a></li>
    <li><a href="BusState.aspx" title="报修信息管理">公交站点</a></li>
    <%-- <li><a href="tsSelect.aspx" title="投诉信息管理">投诉信息管理</a></li>%>
     <%<li><a href="zcglSelect.aspx" title="资产信息管理">资产信息管理</a></li>%>
    <%<li><a href="dzxgSelect.aspx" title="电子巡更信息管理">电子巡更信息管理</a></li>--%>

</ul>

</li>

<li><a class="hide" href="Class.aspx">空中课堂</a>
    <ul>

    </ul>

</li>
<li><a class="hide" href="Library.aspx">掌上图书馆</a>
    <ul>

    </ul>

</li>
<li><a class="hide" href="Office.aspx">移动办公</a>
<%--    <ul>
    <li><a href="fcReport.aspx" title="房产信息报表" >房产信息报表</a></li>
    <li><a href="zhReport.aspx" title="住户信息报表">住户信息报表</a></li>
    <li><a href="bxReport.aspx" title="报修信息报表">报修信息报表</a></li>
    <li><a href="tsReport.aspx" title="投诉信息报表">投诉信息报表</a></li>
     <li><a href="zcglReport.aspx" title="资产管理信息报表">资产管理信息报表</a></li>
    <li><a href="dzxgReport.aspx" title="电子巡更信息报表">电子巡更信息报表</a></li>
    </ul>--%>
</li><li><a class="hide">学生之家</a>
    <ul>
    <li><a href="Checkresult.aspx"title="管理员添加">成绩查询</a></li>
    <li><a href="Choise.aspx" title="用户密码修改">选课系统</a></li>
    <li><a href="CheckStatus.aspx" title="页面信息维护">学籍查询</a></li>
    <%--<li><a href="" title="退出系统" onclick="Confirms()"></a></li>--%>
   <%-- <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>--%>
    </ul>

</li>
<li><a class="hide" href="Master.aspx">家长频道</a>


</li><li><a class="hide">站长信箱</a>

</li></ul>

</div>

</body>
</html>