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>
    

      

  • 相关阅读:
    【python接口自动化】httpUtils
    mac上安装chromedriver
    python自动化测试报告(excel篇)
    Fiddler 手机抓包介绍
    Fiddler 简单介绍
    Python splinter 环境搭建
    Python pip 常用命令
    Python Yaml 学习
    Jmeter
    Python3 操作Excel
  • 原文地址:https://www.cnblogs.com/perseverancevictory/p/4245109.html
Copyright © 2011-2022 走看看