Web二级导航栏练习及jQuery课堂笔记

最新推荐文章于 2022-10-14 17:28:26 发布

balabalapd

最新推荐文章于 2022-10-14 17:28:26 发布

阅读量974

点赞数 1

本文链接：https://blog.csdn.net/WLkkjm/article/details/88861940

版权

一、二级导航栏编辑练习

1、用列表方法实现

●代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级导航栏列表方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav {
            background-color: #818181;
            width: 500px;
            height: 40px;
            margin: 0 auto ;
        }
        ul li{
            list-style: none ;
            float: left ;
            line-height: 40px;
            text-align: center ;
            position: relative ;
        }
        a{
            text-decoration: none ;
            color: #303030;
            padding: 0 20px;
            width: 100px;
        }
        a:hover {
            background-color: darkred ;
            color: white ;
        }
        ul li ul{
            position: absolute ;
            top:30px;
            left: 10px;
        }
        ul li ul li{
            float: none ;
            background-color: #818181;
            margin: 1px 0;
            display: none ;
        }
        ul li ul li a{padding: 0}
        ul li:hover ul li{display: block }
    </style>
</head>
<body>
<div id ="nav">
    <ul>
        <li><a href="#" >首页</a></li>
        <li><a href="#" >课程大厅</a>
            <ul>
                <li><a href="#" > web实训</a></li>
                <li>&l

最低0.47元/天解锁文章

balabalapd

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web二级导航栏练习及jQuery课堂笔记

一、二级导航栏编辑练习1、用列表方法实现 ●代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>二级导航栏列表方法</title> <style> *{ ...
复制链接

扫一扫