zoukankan      html  css  js  c++  java
  • HTML/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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{margin:0px;padding:0px}
    #anv{background-color:#6CF;600px;height:40px;margin:0 auto;}
    ul{list-style:none;}
    ul li{float:left;line-height:40px;120px;text-align:center;position:relative}
    a{text-decoration:none;color:#000;padding:0 10px;display:block;height:40px}
    a:hover{color:#FF0;background-color:#390}
    ul li ul li{float:none;background-color:#EEE;margin-bottom:1px;}
    ul li ul{position:absolute;left:0px;top:40px;display:none}
    ul li ul li a:hover{background-color:#F90}
    ul li:hover ul{display:block}
    
    </style>
    </head>
    
    <body>
    <div id="anv">
    <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">导航一</a>
      <ul>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
      </ul>
      
    </li>
    <li><a href="#">导航二</a>
       <ul>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
      </ul>
    </li>
    <li><a href="#">导航三</a>
     <ul>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
      </ul>
    
    </li>
    <li><a href="#">导航四</a>
      <ul>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
      </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    从头到尾彻底解析Hash表算法
    postgres模糊匹配大杀器
    postgres数据库表空间收缩之pg_squeeze,pg_repack
    pgcli安装
    pg_waldump的使用
    数据库表空间收缩之pg_squeeze,pg_repack
    数据库fillfactor
    pgbouncer连接池
    mysql-选择使用Repeatable read的原因
    postgresql-锁相关
  • 原文地址:https://www.cnblogs.com/perseverancevictory/p/4245109.html
Copyright © 2011-2022 走看看