仿新浪下拉框练习

虽然有BUG，但是先这样吧，下面还有一段，已经完善了

<style>
        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        a {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            /* cursor: pointer; */
            direction: none;
            /* border-left: 1px solid rgb(168, 159, 159);
             */
        }
        
        a:hover {
            background: rgb(37, 37, 37);
            color: orange;
            opacity: 0.7;
            cursor: pointer;
        }
        
        a span {
            position: absolute;
            color: orange;
            font-weight: 1000;
            right: 11px;
            top: 1px;
            transform: rotate(-90deg);
        }
        
        a ul {
            position: absolute;
            left: 0;
            display: none;
            border-left: 1px solid orange;
            border-right: 1px solid orange;
        }
        
        a ul li {
            width: 100px;
            background-color: #fff;
            color: black;
            border-bottom: 1px solid orange;
        }
        
        a ul li:hover {
            background-color: rgb(241, 239, 67);
            color: black;
        }
    style>
head>

<body>
    <a>微博<span>＜span>
        <ul>
            <li>私信li>
            <li>评论li>
            <li>@我li>
        ul>
    a>
body>
<script>
    var as = document.querySelectorAll('a');
    var ul = document.querySelector('ul');
    for (var i = 0; i < as.length; i++) {
        as[i].onmouseenter = function() {
            ul.style.display = 'block'
        }
    }
    for (var i = 0; i < as.length; i++) {
        as[i].onmouseleave = function() {
            ul.style.display = 'none'
        }
    }
script>
<style>
        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        a {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            /* cursor: pointer; */
            direction: none;
            /* border-left: 1px solid rgb(168, 159, 159);
             */
        }
        
        a:hover {
            background: rgb(37, 37, 37);
            color: orange;
            opacity: 0.7;
            cursor: pointer;
        }
        
        a span {
            position: absolute;
            color: orange;
            font-weight: 1000;
            right: 11px;
            top: 1px;
            transform: rotate(-90deg);
        }
        
        a ul {
            position: absolute;
            left: 0;
            display: none;
            border-left: 1px solid orange;
            border-right: 1px solid orange;
        }
        
        a ul li {
            width: 100px;
            background-color: #fff;
            color: black;
            border-bottom: 1px solid orange;
        }
        
        a ul li:hover {
            background-color: rgb(241, 239, 67);
            color: black;
        }
    style>
head>

<body>
    <a>微博<span>＜span>
        <ul class="xl_item">
            <li>私信li>
            <li>评论li>
            <li>@我li>
        ul>
    a>
    <a>会员<span>＜span>
        <ul class="xl_item">
            <li>私信li>
            <li>评论li>
            <li>@我li>
        ul>
    a>
    <a>博客<span>＜span>
        <ul class="xl_item">
            <li>私信li>
            <li>评论li>
            <li>@我li>
        ul>
    a>
    <a>博客<span>＜span>
        <ul class="xl_item">
            <li>私信li>
            <li>评论li>
            <li>@我li>
        ul>
    a>
body>
<script>
    var as = document.querySelectorAll('a');
    var uls = document.querySelectorAll('.xl_item');
    for (var i = 0; i < as.length; i++) {
        as[i].setAttribute('index', i);
        as[i].onmouseenter = function() {
            for (var i = 0; i < uls.length; i++) {
                var index = this.getAttribute('index');
                uls[i].style.display = 'none';
            }
            uls[index].style.display = 'block';
        }
    }
    for (var i = 0; i < as.length; i++) {
        as[i].onmouseleave = function() {
            for (var i = 0; i < uls.length; i++) {
                uls[i].style.display = 'none';
            }
        }
    }
script>

第二种方法

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .nav {
            margin: 100px 100px;
        }
        
        .nav li {
            float: left;
            width: 120px;
            line-height: 40px;
            height: 40px;
            text-align: center;
            background-color: rgb(231, 234, 237);
            cursor: pointer;
        }
        
        .nav li a {
            text-decoration: none;
            color: rgb(245, 75, 37);
        }
        
        .nav li:hover {
            background-color: seashell;
        }
        
        .nav li ul {
            display: none;
            background-color: #fff;
        }
    style>
head>

<body>
    <ul class="nav">
        <li><a href="#">博客a>
            <ul>
                <li>个人博客li>
                <li>功能li>
                <li>会员中心li>
            ul>
        li>
        <li><a href="#">博客a>
            <ul>
                <li>个人博客li>
                <li>功能li>
                <li>会员中心li>
            ul>
        li>
        <li><a href="#">博客a>
            <ul>
                <li>个人博客li>
                <li>功能li>
                <li>会员中心li>
            ul>
        li>
        <li><a href="#">博客a>
            <ul>
                <li>个人博客li>
                <li>功能li>
                <li>会员中心li>
            ul>
        li>
    ul>
body>
<script>
    // 获取下拉菜单的父节点
    var nav = document.querySelector('.nav');
    // 获取父节点下所有子节点
    var lis = nav.children;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseenter = function() {
            this.children[1].style.display = 'block';
        }
    }
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseleave = function() {
            this.children[1].style.display = 'none';
        }
    }
script>

 

 

posted @ 2021-06-18 11:51  唯爱小喵  阅读(73)  评论(0)    收藏  举报