zoukankan      html  css  js  c++  java
  • html+css实现下拉菜单效果

    直接来看代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        *{ margin:0; padding:0;}
        ul,li{list-style: none;}
        .box{ width:600px; height:40px; margin:0 auto;}
        .box ul{ list-style:none;}
        .box ul li{ float:left; line-height:40px; text-align:center; position:relative;}
        .box ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}
        .box ul li a:hover{ color:#FFF; background:#333}
        .box ul li ul{ position:absolute; display:none;}
        .box ul li ul li{ float:none; line-height:30px; text-align:left;}
        .box ul li ul li a{ width:100%;}
        .box ul li ul li a:hover{ background-color:#06f;}
        .box ul li:hover ul{ display:block}
    </style>
    <body>
    <div class="box">
        <ul>
            <li>
                <a href="javascript:void(0)">一级菜单</a>
                <ul class="ul">
                    <li><a href="javascript:void(0)">二级菜单1</a></li>
                    <li><a href="javascript:void(0)">二级菜单2</a></li>
                    <li><a href="javascript:void(0)">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0)">一级菜单</a>
                <ul>
                    <li><a href="javascript:void(0)">二级菜单1</a></li>
                    <li><a href="javascript:void(0)">二级菜单2</a></li>
                    <li><a href="javascript:void(0)">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0)">一级菜单</a>
                <ul>
                    <li><a href="javascript:void(0)">二级菜单1</a></li>
                    <li><a href="javascript:void(0)">二级菜单2</a></li>
                    <li><a href="javascript:void(0)">二级菜单3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    
    </body>
    </html>

    效果图:

    就是这么的简单粗暴!哈哈哈

  • 相关阅读:
    条件变量:为什么要与互斥锁配套使用?为什么要使用while来避免虚假唤醒?
    【转】高性能IO之Reactor模式
    LeetCode127:单词接龙
    CF1245F: Daniel and Spring Cleaning
    权值线段树学习笔记
    luogu_4317: 花神的数论题
    luogu_2605: 基站选址
    入门平衡树: Treap
    CF1244C: The Football Season
    luogu_1156: 垃圾陷阱
  • 原文地址:https://www.cnblogs.com/web001/p/8331064.html
Copyright © 2011-2022 走看看