zoukankan      html  css  js  c++  java
  • 好看的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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>导航菜单</title>
    <style>
    body,td,th {
     font-family: Tahoma, Verdana, Arial, sans-serif;
     font-size: 12px;
     color: #333333;
    }
    body {
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
    }
    a {
     color: #333333;
     text-decoration: none;
    }
    a:hover {
     color: #FF0000;
     text-decoration: none;
    }
    a:active{
     color: #FF0000;
     text-decoration: none;
    }
    #menu{
     height:32px;
     margin-top:8px; background-color:#990000;
    }
    #menu ul{
     margin:auto; 778px; height:32px;
     list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;
    }
    .m_li{
     float:left; 114px; line-height:32px;  text-align:center; margin-right:-2px; margin-left:-2px;
    }
    .m_li a{
     display:block; color:#FFFFFF; 114px;
    }
    .m_line{
     float:left; 1px; height:32px;
     line-height:32px;   /*ff下有效(图片垂直居中)*/
    }
    .m_line img{
     margin-top:expression(( 32 - this.height ) / 2);   /*ie下有效(图片垂直居中)*/
    }
    .m_li_a{
     float:left; 114px; line-height:32px; text-align:center; padding-top:3px; font-weight:bold;
     background-image:url(http://www.codefans.net/jscss/demoimg/200904/menu_bg2.jpg); position:relative; height:32px; margin-top:-3px; margin-right:-2px; margin-left:-2px;
    }
    .m_li_a a{
     display:block; color:#FF0000; 114px;
    }
    .smenu{
     774px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px;
    }
    .s_li{
     line-height:32px; auto; display:none; height:32px; 
    }
    .s_li_a{
     line-height:32px; auto; display:block; height:32px; 
    }
    </style>
    <script>
    //初始化
    var def="1";
    function mover(object){
      //主菜单
      var mm=document.getElementById("m_"+object);
      mm.className="m_li_a";
      //初始主菜单隐藏效果
      if(def!=0){
        var mdef=document.getElementById("m_"+def);
        mdef.className="m_li";
      }
      //子菜单
      var ss=document.getElementById("s_"+object);
      ss.style.display="block";
      //初始子菜单隐藏效果
      if(def!=0){
        var sdef=document.getElementById("s_"+def);
        sdef.style.display="none";
      }
    }
    function mout(object){
      //主菜单
      var mm=document.getElementById("m_"+object);
      mm.className="m_li";
      //初始主菜单
      if(def!=0){
        var mdef=document.getElementById("m_"+def);
        mdef.className="m_li_a";
      }
      //子菜单
      var ss=document.getElementById("s_"+object);
      ss.style.display="none";
      //初始子菜单
      if(def!=0){
        var sdef=document.getElementById("s_"+def);
        sdef.style.display="block";
      }
    }
    </script>
    </head>
    <body>
    <div id="menu">
      <ul>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
        <li id="m_1" class='m_li_a'><a href="#">财税首页</a></li>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
        <li id="m_2" class='m_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="#">政务公开</a></li>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
        <li id="m_3" class='m_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="#">网上办事</a></li>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
        <li id="m_4" class='m_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="#">公告中心</a></li>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
        <li id="m_5" class='m_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="#">法规中心</a></li>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
        <li id="m_6" class='m_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="#">财税文化</a></li>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
        <li id="m_7" class='m_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="#">专题宣传</a></li>
        <li class="m_line"><img src="http://www.codefans.net/jscss/demoimg/200904/line2.gif" /></li>
      </ul>
    </div>
    <div style="height:32px; background-color:#F1F1F1;">
       <ul class="smenu">
         <li style="padding-left:29px;" id="s_1" class='s_li_a'>欢迎光临源码爱好者,您是本站第13122842位爱好者!</li>
         <li style="padding-left:141px;" id="s_2" class='s_li' onmouseover='mover(2);' onmouseout='mout(2);'><a href="/">财税简介</a>  |  <a href="http://www.codefans.net">机构设置</a>  |  <a href="/">办事指南</a>  |  <a href="/">税种简介</a>  |  <a href="/">财税动态</a>  |  <a href="/">网页特效</a></li>
         <li style="padding-left:252px;" id="s_3" class='s_li' onmouseover='mover(3);' onmouseout='mout(3);'><a href="/">下载专区</a>  |  <a href="/">上传专区</a>  |  <a href="http://codefans.net">申请报名</a>  |  <a href="http://codefans.net">查询系统</a>  |  <a href="http://www.codefans.net">咨询投诉</a>  |  <a href="/">满意调查</a></li>
         <li style="padding-left:362px;" id="s_4" class='s_li' onmouseover='mover(4);' onmouseout='mout(4);'><a href="/">最新公告</a>  |  <a href="/">会计通知</a></li>
         <li style="padding-left:474px;" id="s_5" class='s_li' onmouseover='mover(5);' onmouseout='mout(5);'><a href="/">最新政策</a>  |  <a href="http://www.codefans.net">政策法规查询</a></li>
         <li style="padding-left:447px;" id="s_6" class='s_li' onmouseover='mover(6);' onmouseout='mout(6);'><a href="/">税收宣传</a>  |  <a href="/">最新更新</a>  |  <a href="http://codefans.net">文明创建</a>  |  <a href="http://codefans.net" target="_blank">青年论坛</a>  |  <a href="#">廉政课堂</a></li>
         <li style="padding-left:696px;" id="s_7" class='s_li' onmouseover='mover(7);' onmouseout='mout(7);'><a href="/">专题宣传区</a></li>
       </ul>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    Java:前程似锦的 NIO 2.0
    优秀的程序员都热爱写作
    Java -- JDBC 学习--获取数据库链接
    前端学习 -- Html&Css -- 条件Hack 和属性Hack
    前端学习 -- Html&Css -- ie6 png 背景问题
    前端学习 -- Html&Css -- 框架集
    ECMAScript 6 -- 字符串的扩展
    ECMAScript 6 -- 数组的解构赋值
    前端学习 -- Html&Css -- 表单
    前端学习 -- Html&Css -- 表格
  • 原文地址:https://www.cnblogs.com/wsl2011/p/2236353.html
Copyright © 2011-2022 走看看