2019/9/06 H5（二级菜单）

最新推荐文章于 2023-06-02 15:03:56 发布

她她她_ta

最新推荐文章于 2023-06-02 15:03:56 发布

阅读量408

点赞数

分类专栏： H5 文章标签： H5

本文链接：https://blog.csdn.net/qq_42243225/article/details/100573923

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>

<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;/*字体不要下划线*/
			}

             /*行内元素/块级元素*/
			/*行内元素:img/input/a/span*/
			/*a/span行内元素不能设置宽高*/
			/*块级元素:div/ul/li/ol/p/form/table*/
			/*display:none/block/inline*/

.nav{
			font-size: 0px;
		}
		.nav>li{  /*nav>li下拉导航没有背景色*/
			display: inline-block;/*在第一行显示*/
			vertical-align: top; /*垂直顶对齐*/
			width: 100px;
			height: 30px;
			font-size: 16px;/*字体大小*/
			background: #CCCCCC;
			text-align: center;/*字体居中*/
			line-height: 30px;
		}
		.subnav{
			display: none;/*隐藏*/
			border: 1px solid lightblue;
		}
		.nav li:hover .subnav{ 
			display: block;/*显示*/
			
		}
		.subnav li:hover{
			color: red;
			background:lightblue;
		}
		</style>

	</head>
	<body>
    <!-- <span style="display:block;width:100px;background:red;">dd</span> -->
    <ul class="nav">
        <li>
        	<a href="">首页</a>
        	 <ul class="subnav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>
        <li>
           <a href="">新闻</a>
            <ul class="subnav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>
        <li>
           <a href=""> 地图</a>
            <ul class="subnav">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述

她她她_ta

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2019/9/06 H5（二级菜单）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style> *{ padding: 0; margin: 0; } li{ list-style: none;...
复制链接

扫一扫

专栏目录