仿写新浪下拉菜单HTML+CSS+JavaScript

最新推荐文章于 2022-12-06 12:23:22 发布

原创最新推荐文章于 2022-12-06 12:23:22 发布 · 2.4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何使用HTML、CSS和JavaScript来创建类似新浪网站的下拉菜单。通过结合HTML的结构，CSS的样式控制以及JavaScript的交互功能，实现了下拉菜单在鼠标悬停时的动态显示效果，增强了用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav{
            width: 600px;
            height: 30px;
            float: left;
            background-color:#eee;
            margin-left: 30px;
        }
        .nav ul {
           display: none;
           margin: 0;
            padding: 0;
           
        }
        .nav li{
		float:left;
		width:70px;
		font-size:80%;
        font-size: 14px;
        margin-top: 6px;
        background-color:#eee;
	}
    .nav ul li{
        border-bottom: 1px solid #FECC5B;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <p>登录</p>
        </li>
        <li>
            <p>微博</p>
            <ul>
                <li>
                    <p>私信</p>
                </li>
                <li>
                  <p>评论</p>
                </li>
                <li>
                   <p>@我</p>
                </li>
            </ul>
        </li>

        <li>
            <p>博客</p>
            <ul>
                <li>
                    <p>博客评论</p>
                </li>
                <li>
                   <p>未读提醒</p>
                </li>
                
            </ul>
        </li>

        
        <li>
            <p>邮箱</p>
            <ul>
                <li>
                   <p>免费邮箱</p>
                </li>
                <li>
                    <p>vip邮箱</p>
                </li>
                <li>
                    <p>企业邮箱</p>
                </li>
               
            </ul>
        </li>
        
    </ul>
    <script>
        //1.获得元素 
        var nav = document.querySelector('.nav');
        var lis = nav.children;

        //2.循环注册事件
        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>``

标签

#html #js #css