网页下拉菜单

在这里插入图片描述

代码如下

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏下拉title>
    <link rel="stylesheet" href="导航栏下拉.css">
	<style>
		ul{
		    width: 400px;
		    height: 30px;
		    line-height: 30px;
		    background-color: rgb(6, 7, 7);
		}/* 对导航栏的整体样式进行设置 */
		ul li{
		    list-style: none;
		    float: left;
		}/* 删除列表的样式并设置浮动 */
		a{
		    color: white;
		    padding: 20px;
		    margin: 0px;
		    text-decoration: none;
		}/* 设置a标签的样式 */
		
		.nav1 {
		    position: relative;/* 设置相对定位 */
		    display: inline-block;/* 让元素具有块级元素和行内元素的特性,即将块级元素转化为内联元素 */
		}
		
		.nav2 {
		    display: none;/* 将某元素隐藏起来 */
		    position: absolute;/* 绝对定位 */
		    background-color: #f9f9f9;
		    min-width: 81px;/* 最小宽度 */
		}
		
		.nav2 a {
		    color: black;
		    padding: 12px 16px；
		    display: block;/* 将a标签设置为块级标签 */
		}
		
		.nav2 a:hover {
		    background-color: #da8181
		}/* 鼠标悬浮时的颜色 */
		
		.nav1:hover .nav2 {
		    display: block;
		}/* 鼠标悬浮在元素上时,变为块级标签 */
		
		.nav1:hover,li:hover{
		    background-color: #12adb8;
		}

	style>	
head>
<body>
    <ul>
        <li><a href="#">内容1a>li>
        <li><a href="#">内容2a>li>
        <li><a href="#">内容3a>li>
        <div class="nav1">
            <a href="#" class="cont">内容4a>
        <div class="nav2">
            <a href="#">box1a>
            <a href="#">box2a>
            <a href="#">box3a>
            <a href="#">box4a>
        div>
        div> 
    ul>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

相关阅读:
本机idea连接虚拟机中的Hbase
python基础练习题库实验9
[附源码]Python计算机毕业设计Django的文成考研培训管理系统
RabbitMQ的高级特性
BGRL pyg环境安装
Python Web开发--Django框架：全套学习路线和知识总结
SQL注入漏洞（原理篇）
ES6之数组解构
零基础自学javase黑马课程第十三天
页面懒加载

原文地址：https://blog.csdn.net/weixin_43310774/article/details/133916396