html+css实现菜单栏

最新推荐文章于 2023-09-10 22:01:05 发布

VIP文章好想长大

最新推荐文章于 2023-09-10 22:01:05 发布

阅读量1.1k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_42943220/article/details/103630443

版权

html+css实现二级菜单栏

<html>
<head><title></title></head>

<body>

<style>
	#titlebar {
		padding-top:0;
		padding-left:0;
		padding-right:0;
		background-color:grey;
		height:50px;
		width:100%;
		position:absolute;
		left:0;
		top:0;
	}
	#titlebar ul {
		list-style: none;
		padding-left:0;
		margin:0;
		height:100%;
	}
	#titlebar ul li {
		float: left;
		padding-right: 50px;
		padding-left: 50px;
		padding-bottom:14.5px;
		padding-top: 14.5px;
		padding-bottom: 14.5px;
		display: block;
	}
	#titlebar ul li a{
		display: block;
	}

	#titlebar ul li:hover {
		background-color: dimgray;
	}
	#titlebar ul li.level1:hover {
		padding-left: 0;
		padding-right: 0;
	}
	#titlebar ul li.level1:hover>a{
		padding-left: 50px;
		padding-right: 50px;
		margin-bottom:14.5px;
	}

	#titlebar ul li.level1:hover .level2 {
		display: block;
	}

	#titlebar ul li.level1 ul.level2 {
		display: none;

最低0.47元/天解锁文章

好想长大

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css实现菜单栏

html+css实现二级菜单栏<html><head><title></title></head><body><style> #titlebar { padding-top:0; padding-left:0; padding-right:0; background-color:gre...
复制链接

扫一扫