zoukankan      html  css  js  c++  java
  • html5 css练习 下拉菜单制作

    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style-type: none;
    }
    a{
        text-decoration: none;
    }
    .ul1{
    margin: 50px;
    }

    .ul1>li{
         150px;
        height: 2em;
        border-radius: 0.5em 0.5em 0 0;
        background: rgba(30,80,200,0.8);
        font-size: 20px;
        line-height: 2em;
        text-align: center;
        float: left;
        margin-left: 20px;
    }
    .ul2{
        background: rgba(80,80,160,0.6);
        border-radius: 0 0 0.5em 0.5em;
        display: none;
    }

    .ul2>li>a:hover{
        background: rgba(140,180,40,0.8);
         85%;
        height: 1.5em;
        line-height: 1.5em;
        display:inline-block;
        border-radius: 0.5em;
        font-weight: bold;
        padding: 3px 3px;

    }

    .ul1>li:hover>ul{
        display: block;    
    }

    .ul1>li:hover{
        background: rgba(30,80,250,0.8);    
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <link rel="stylesheet" href="style9.css" type="text/css">
    </head>
    <body>
    <nav>
        <ul class="ul1">
            <li><a href="">首页</a>
                <ul class="ul2">
                    <li><a href="">新闻</a></li>
                    <li><a href="">科技</a></li>
                    <li><a href="">财经</a></li>
                    <li><a href="">读书</a></li>
                </ul>
            </li>
            <li><a href="">首页</a>
                <ul class="ul2">
                    <li><a href="">新闻</a></li>
                    <li><a href="">科技</a></li>
                    <li><a href="">财经</a></li>
                    <li><a href="">读书</a></li>
                </ul>
            </li>
            <li><a href="">首页</a>
                <ul class="ul2">
                    <li><a href="">新闻</a></li>
                    <li><a href="">科技</a></li>
                    <li><a href="">财经</a></li>
                    <li><a href="">读书</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    </body>
    </html>

    天道酬勤,厚积薄发。 君子之行,静以修身,俭以养德。 非淡泊无以明志,非宁静无以致远。 如有恒,何须三更起,半夜眠;最怕莫,三天打鱼两天晒网,竹篮打水一场空。
  • 相关阅读:
    虚拟机网络模式
    js读取json包装的map集合
    LeetCode 94:Binary Tree Inorder Traversal
    tornado+ansible+twisted+mongodb运维自己主动化系统开发(四)
    UVA
    解决request.getRemoteAddr()获取的值为0:0:0:0:0:0:0:1这个小问题
    eclipse调试web项目
    Action的mapping.findFoward(forwardName)必须要在struts-config.xml中的对应的action节点配置一个forward节点
    使用struts的时候form用struts的,不用html本身的
    eclipse的源代码编辑窗口可以拖出来单独使用的哦
  • 原文地址:https://www.cnblogs.com/houweidong/p/9754807.html
Copyright © 2011-2022 走看看