侧边栏制作

最新推荐文章于 2023-12-23 23:46:51 发布

可我不吃肉

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量461

点赞数

本文链接：https://blog.csdn.net/zfc180/article/details/104195441

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

   body,ul{
            margin:0;
        }
        .tab{
            width: 258px;
            height: 420px;
            margin:50px auto 0;
        }
       .con{
           width: 258px;
           height: 420px;
           position: relative;
           padding-left: 0;
           background-color: #272a38;       
       }
       li{
           list-style: none;
           width: 258px;
           height: 84px;
       }
         li:hover{
           background-color: #47484c;
       }
       a{
           display:block;
           text-decoration: none;
           line-height: 84px;
           color:#fff;
           font-size:22px;
           text-align: center;
       }
        .nav{
           display:none;
           position: absolute;
           width: 500px;
           height: 420px;
           top:0;
           left:258px;
           background-color: #eeeeee ;
       }
       img{
           margin-right:19px;
       }
       .one:hover >ul {
           display: block;
       }
       .one1:hover >ul {
           display: block;
       }
       .one2:hover >ul {
           display: block;
       }
       .one3:hover >ul {
           display: block;
       }
       .one4:hover >ul {
           display: block;
       }
    </style>
</head>
<body>
    <div class="tab">
        <ul class="con">
            <li class="one">
                <a href="#">
                    <img src="images/1.png" alt="">IT互联网</a>
                <ul class="nav">
                   ccc
                </ul>
            </li>
            <li class="one1">
                <a href="#"><img src="images/2.png" alt="">设计创作</a>
                <ul class="nav">
                   bbbb
                </ul>
            </li>
            <li class="one2">
                <a href="#"><img src="images/3.png" alt="">实用外语</a>
                <ul class="nav">
                   vvvv
                </ul>
            </li>
            <li class="one3">
                <a href="#"><img src="images/4.png" alt="">兴趣艺术</a>
                <ul class="nav">
                   ffff
                </ul>
            </li>
            <li class="one4">
                <a href="#"><img src="images/5.png" alt="">农业生产</a>
                <ul class="nav">
                   dddd
                </ul>
            </li>
        </ul>
    </div>
</body>