您的位置：首页 > Web前端 > HTML

导航下拉二级菜单特效

2013-04-29 08:49 543 查看

<!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=utf-8" />

<title>兼容多种浏览器的下拉式二级菜单</title>

<style type="text/css">

.menu {

font:"宋体" 12px;

width:760px;

margin:0;

margin:50px auto;

}

.menu ul {

padding:0;

margin:0;

list-style-type: none;

}

.menu ul li {

float:left;

position:relative;

}

.menu ul li a, .menu ul li a:visited {

 

display:block;

text-align:center;

text-decoration:none;

width:104px;

height:30px;

color:#fff;

border:1px solid #fff;

border-width:1px 1px 0 0;

background:#0055A6;

line-height:30px;

font-size:13px;

letter-spacing:1px;

}

.menu ul li ul {

display: none;

}

.menu ul li:hover a {

color:#fff;

background:#0288dc;

}

.menu ul li:hover ul {

display:block;

position:absolute;

top:31px;

left:0;

width:105px;

}

.menu ul li:hover ul li a {

display:block;

background:#0288dc;

height:20px;

line-height:20px;

color:#fff;

font-size:13px;

}

.menu ul li:hover ul li a:hover {

color:#000;

}

</style>

</head>

<body>

<div class="menu">

    <ul>

   <li><a class="hide">走进亘元</a>

      <ul>

     <li><a href="#">概　　况</a></li>

     <li><a href="#">组织架构</a></li>

     <li><a href="#">大事纪要</a></li>

      </ul>

   </li>

   <li><a class="hide" href="#">企业文化</a>

      <ul>

     <li><a href="#">企业荣誉</a></li>

     <li><a href="#">公益活动</a></li>

      </ul>

   </li>

   <li><a class="hide" href="#">资讯中心</a>

      <ul>

     <li><a href="#">集团新闻</a></li>

     <li><a href="#">公司新闻</a></li>

     <li><a href="#">政策风向</a></li>

     <li><a href="#">媒体报道</a></li>

      </ul>

   </li>

   <li><a class="hide" href="#">开发案例</a>

      <ul>

     <li><a href="#">太阳都市花园</a></li>

     <li><a href="#">望都·郡府</a></li>

     <li><a href="#">望都·郡府二期</a></li>

     <li><a href="#">望都·太阳城</a></li>

     <li><a href="#">望都·水木灵州</a></li>

      </ul>

   </li>

   <li><a class="hide" href="#">人力资源</a>

      <ul>

     <li><a href="#">招聘计划</a></li>

     <li><a href="#">人事公告</a></li>

      </ul>

   </li>

   <li><a class="hide" href="#">商务合作</a>

      <ul>

     <li><a href="#">土地合作</a></li>

     <li><a href="#">招标中心</a></li>

     <li><a href="#">合作伙伴</a></li>

     <li><a href="#">联系我们</a></li>

      </ul>

   </li>

   <li><a class="hide" href="#">联系我们</a>

      <ul>

     <li><a href="#" >模板王</a></li>

     <li><a href="#">特效脚本</a></li>

      </ul>

   </li>

 </ul>

</div>

</body>

</html>

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  导航 HTML
相关文章推荐
新的分享
章节导航