zoukankan      html  css  js  c++  java
  • CSS+XHTML制作的一款简单菜单

    演示效果截图

     CSS+XHTML制作的一款简单菜单

    CSS代码

    <style type="text/css">
    <!--
    * {
    	margin:0;
    	padding:0;
    }
    body {
    	font:12px Verdana, Geneva, sans-serif #444;
    	line-height:1.5;
    }
    ul li {
    	list-style:none;
    }
    .menu {
    	660px;
    	margin:20px auto;
    }
    .menu li {
    	display:inline;
    	float:left;
    	margin:0 5px;
    	background:#f2f2f2;
    	border:1px #39c solid;
    	text-align:center;
    	font-size:14px;
    	font-weight:700;
    	line-height:30px;
    	cursor:hand;	
    }
    .tuckUp {
    	display:inline;
    	140px;
    	height:30px;
    	overflow:hidden;
    	background:#f2f2f2;
    }
    .pullDown{
    	display:inline;
    	height:auto;
    }
    .item a:link, .item a:visited {
        display:inline;
    	float:left;
    	110px;
    	background:#ccc;
    	text-align:center;
    	color:#444;
    	font-size:12px;
    	font-weight:normal;
    	text-decoration:none;
    	line-height:25px;
    	margin:0 5px 5px 5px;
    }
    .item a:hover {
    	display:inline;
    	float:left;
    	background:#39c;
    	100px;
    	color:#FFF;
    	text-decoration:none;
    	text-align:center;
    	font-size:12px;
    	font-weight:700;
    	font-weight:normal;
    	line-height:25px;
    	padding:0 0 0 10px;
    	margin:0 5px 5px 5px;
    }
    //
    -->
    </style>

    HTML代码

    <ul class="menu">
      <li class="tuckUp" onmousemove="this.className='pullDown'"
       onmouseout="this.className='tuckUp'">www.865171.cn
        <div class="item"><a href="http://www.865171.cn">ITEM01</a><br />
          <a href="http://www.865171.cn">ITEM02</a></a><br />
          <a href="http://www.865171.cn">ITEM03</a><br />
          <a href="http://www.865171.cn">ITEM04</a><br />
          <a href="http://www.865171.cn">ITEM05</a><br />
          <a href="http://www.865171.cn">ITEM06</a><br /></div>
      </li>
      <li class="tuckUp" onmouseover="this.className='pUllDown'"
       onmouseout="this.className='tuckUp'">MenuTwo
        <div class="item"><a href="http://www.865171.cn">ITEM01</a><br />
          <a href="http://www.865171.cn">ITEM02</a><br />
          <a href="http://www.865171.cn">ITEM03</a><br />
          <a href="http://www.865171.cn">ITEM04</a><br /></div>
      </li>
    </ul>
  • 相关阅读:
    centos7配置java环境
    docker下安装vim
    小程序开发知识点总结
    response设置输出文件编码
    IDEA中,将文件夹加入classpath
    【问题排查】StringIndexOutOfBoundsException
    【问题排查记录】Field 'id' doesn't have a default value;
    http
    raw_input() 与 input() __ Python
    记一次eclipse无法启动的排查过程
  • 原文地址:https://www.cnblogs.com/luluping/p/1542083.html
Copyright © 2011-2022 走看看