DIV+CSS编写的Menu

来源:互联网 发布:淘宝如何添加收藏店铺 编辑:程序博客网 时间:2024/06/06 14:14

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.tablediv{ position:relative; width:100px; padding-top:5px; padding-bottom:5px; background:#CCCCCC; border:0px; cursor:pointer; float:left; text-align:center; font-size:14px;}
.tablediv a{ text-decoration:none; color:#000000;}
.tablediv:hover{ background:#666;}
.tablediv:hover .trdiv{ display:block; }

.trdiv{ position:absolute; width:140px; background:#EFEFEF; left:0px; display:none; margin-top:5px;}
<![if IE]-->
<!--
.trdiv{ position:absolute; width:140px; background:#EFEFEF; left:0px; display:none; margin-top:21px;}
-->

.lidiv{ padding-top:5px; padding-bottom:5px; padding-left:10px; text-align:left;}
.lidiv:hover{ background:#C00;}

.ul1{ display:none; position:absolute; background:#EFEFEF; width:140px;}
.lidiv:hover > .ul1{ display:block; right:-140px; margin-top:-21px;}
</style>
</head>

<body>
<div style="text-align:center; margin-left:300px; min-width:500px;">
<div class="tablediv">
DIV+CSS入门
 <div class="trdiv">
  <div class="lidiv"><a href="#">DIV+CSS入门1</a>
   <div class="ul1">
    <div class="lidiv"><a href="#">DIV+CSS入门1</a></div>
    <div class="lidiv"><a href="#">DIV+CSS入门2</a>
     <div class="ul1">
      <div class="lidiv"><a href="#">DIV+CSS入门1</a></div>
      <div class="lidiv"><a href="#">DIV+CSS入门2</a></div>
      <div class="lidiv"><a href="#">DIV+CSS入门3</a>
       <div class="ul1">
        <div class="lidiv"><a href="#">DIV+CSS入门1</a></div>
        <div class="lidiv"><a href="#">DIV+CSS入门2</a></div>
        <div class="lidiv"><a href="#">DIV+CSS入门3</a></div>
       </div>
      </div>
     </div>
    </div>
    <div class="lidiv"><a href="#">DIV+CSS入门3</a></div>
    <div class="lidiv"><a href="#">DIV+CSS入门4</a></div>
   </div>
  </div>
  <div class="lidiv"><a href="#">DIV+CSS入门2</a>
   <div class="ul1">
    <div class="lidiv"><a href="#">DIV+CSS入门1</a></div>
    <div class="lidiv"><a href="#">DIV+CSS入门2</a></div>
    <div class="lidiv"><a href="#">DIV+CSS入门3</a></div>
   </div>
  </div>
  <div class="lidiv"><a href="#">DIV+CSS入门3</a></div>
 </div>
</div>
<div class="tablediv">
DIV+CSS进阶
 <div class="trdiv">
  <div class="lidiv"><a href="#">DIV+CSS进阶1</a></div>
  <div class="lidiv"><a href="#">DIV+CSS进阶2</a></div>
  <div class="lidiv"><a href="#">DIV+CSS进阶3</a></div>
 </div>
</div>
<div class="tablediv">
DIV+CSS深入
 <div class="trdiv">
  <div class="lidiv"><a href="#">DIV+CSS深入1</a></div>
  <div class="lidiv"><a href="#">DIV+CSS深入2</a></div>
  <div class="lidiv"><a href="#">DIV+CSS深入3</a></div>
 </div>
</div>
<div class="tablediv">
DIV+CSS精通
 <div class="trdiv">
  <div class="lidiv"><a href="#">DIV+CSS精通1</a></div>
  <div class="lidiv"><a href="#">DIV+CSS精通2</a></div>
  <div class="lidiv"><a href="#">DIV+CSS精通3</a></div>
  <div class="lidiv"><a href="#">DIV+CSS精通4</a></div>
 </div>
</div>
</div>
</body>
</html>

原创粉丝点击