echarts 数据结构 细胞因子 ASP.NET Core arrays forms facebook templates tcp triggers jackson textview vue最新版本 vue案例 河南普通话考试报名 jquery循环 hadoop入门书籍 查看kafka消费情况 oracle自增长 oracle时间格式化 mysql学习 python3教程 python写脚本 python基础练习 python传递参数 java数据库 javarandom java获取文件 蓝牙运动耳机排行榜 redis入门指南 微信客户管理系统 cmd代码 bbm注册 说话不算数的经典语句 烧饼修改器打不开 pmbok第六版 ABViewer 批量插入数据 天正建筑2007 pr抖动特效
当前位置: 首页 > 学习教程  > 编程语言

新浪下拉菜单

2021/5/8 21:04:44 文章标签:

ul.nav>li * 4 4个小li里面都放一个标签、一个ul、ul里面再放li>a * 4,如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedg…

在这里插入图片描述

ul.nav>li * 4
4个小li里面都放一个标签、一个ul、ul里面再放li>a * 4,如下:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aout {
            float: left;
            width: 150px;
            height: 300px;
            list-style: none;
            /* line-height:; */
            text-align: center;

        }
      

        .nav ul {
            text-align: left;
            padding: 0px;
            list-style: none;
            display: none;
            position: absolute;
            border-left: 1px solid rgb(255, 165, 0);
            border-right: 1px solid rgb(255, 165, 0);

        }

        a {
            text-decoration: none;
            color: #333;
            display: block;
        }

        /* .nav li a:hover {
            text-decoration: none;
            background-color: rgb(187, 184, 184);


        } */

        .nav ul li {
            border-bottom: 1px solid rgb(255, 165, 0);
        }
        .aout ul li{
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .aout ul li:hover{
            background-color: rgb(218, 144, 60);
        }
    </style>
</head>

<body>
    <ul class="nav">
       
        <li class="aout">
            <a href="#">微博</a>
            <ul>
                <li><a href="http://www.baidu.com">评论</a></li>
                <li><a href="http://www.baidu.com">点赞</a></li>
                <li><a href="http://www.baidu.com">@我</a></li>
            </ul>
        </li> <li class="aout">
            <a href="#">博客</a>
            <ul>
                <li><a href="http://www.baidu.com">评论</a></li>
                <li><a href="http://www.baidu.com">点赞</a></li>
                <li><a href="http://www.baidu.com">@我</a></li>
            </ul>
        </li> <li class="aout">
            <a href="#">邮箱</a>
            <ul>
                <li><a href="http://www.baidu.com">评论</a></li>
                <li><a href="http://www.baidu.com">点赞</a></li>
                <li><a href="http://www.baidu.com">@我</a></li>
            </ul>
        </li> <li class="aout">
            <a href="#">关注</a>
            <ul>
                <li><a href="http://www.baidu.com">评论</a></li>
                <li><a href="http://www.baidu.com">点赞</a></li>
                <li><a href="http://www.baidu.com">@我</a></li>
            </ul>
        </li>
    </ul>
    <script>
        var lis = document.querySelector('.nav').children;
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

本文链接: http://www.dtmao.cc/news_show_995020.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?