怎么做.css下拉菜单

 <!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><!--[if lte IE 8]>
<a href="Index.aspx">首页
<table><tr><td>
<![endif]-->
 
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li><li><a class="hide">生活信息查询</a><!--[if lte IE 8]>
<a href="zhxxAdd.aspx">生活信息查询
<table><tr><td>
<![endif]-->
    <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>
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li>

<li><a class="hide">公交信息管理</a><!--[if lte IE 8]>
<a href="zhxxSelect.aspx">公交信息管理
<table><tr><td>
<![endif]-->
    <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>
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li>


<li><a class="hide" href="Class.aspx">空中课堂</a><!--[if lte IE 8]>
<a href="Class.aspx">空中课堂
<table><tr><td>
<![endif]-->
    <ul>
  
    </ul>
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="Library.aspx">掌上图书馆</a><!--[if lte IE 8]>
<a href="Library.aspx">掌上图书馆
<table><tr><td>
<![endif]-->
    <ul>
  
    </ul>
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="Office.aspx">移动办公</a><!--[if lte IE 8]>
<a href="Office.aspx">移动办公
<table><tr><td>
<![endif]-->
  <%--    <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>--%><!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li><li><a class="hide">学生之家</a><!--[if lte IE 8]>
<a href="sysManger.aspx">学生之家
<table><tr><td>
<![endif]-->
    <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="退出系统" οnclick="Confirms()"></a></li>--%>
   <%-- <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>--%>
    </ul>
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="Master.aspx">家长频道</a><!--[if lte IE 8]>
<a href="Master.aspx">家长频道
<table><tr><td>
<![endif]-->
 
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li><li><a class="hide">站长信箱</a><!--[if lte IE 8]>
<a href="Contacts.aspx">站长信箱
<table><tr><td>
<![endif]-->
<!--[if lte IE 8]>
</td></tr></table>
</a>
<![endif]-->
</li></ul>
<!-- clear the floats if required -->
</div>
   
 

   
  </body>  
  </html>  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个简单的下拉菜单和下拉图片的CSS代码示例: ```html <!DOCTYPE html> <html> <head> <title>下拉菜单和下拉图片示例</title> <style type="text/css"> /* 下拉菜单样式 */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } /* 下拉图片样式 */ .dropdown-img { position: relative; display: inline-block; cursor: pointer; user-select: none; } .dropdown-img-content { display: none; position: absolute; z-index: 1; } .dropdown-img:hover .dropdown-img-content { display: block; } </style> </head> <body> <!-- 下拉菜单示例 --> <div class="dropdown"> <button>下拉菜单</button> <div class="dropdown-content"> <a href="#">菜单项 1</a> <a href="#">菜单项 2</a> <a href="#">菜单项 3</a> </div> </div> <!-- 下拉图片示例 --> <div class="dropdown-img"> <img src="drop-down-arrow.png" alt="下拉图片"> <div class="dropdown-img-content"> <img src="image-1.png" alt="图片 1"> <img src="image-2.png" alt="图片 2"> <img src="image-3.png" alt="图片 3"> </div> </div> </body> </html> ``` 在这个示例中,我们使用了两种不同的样式来创建下拉菜单和下拉图片。它们的基本思路是一样的:使用CSS的`position`属性来设置元素的定位,并使用`display`属性来控制元素的可见性。当鼠标悬停在下拉菜单或下拉图片上时,我们使用CSS的`:hover`伪类来改变`display`属性的值,从而实现下拉效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值