今日收获：制作下拉式导航需要注意的问题

最新推荐文章于 2022-02-20 14:17:46 发布

@Vivi_

最新推荐文章于 2022-02-20 14:17:46 发布

阅读量173

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_53083297/article/details/121184183

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>   <!-- 布置HTML框架时一定要注意先后向顺序，比如有文字链接的，先把链接打出来在敲文字 补救方法：用标签包裹行或选中项: CTRL + shift + W
制作导航下拉导航列表步骤：
1.先把导航分层，直接显示的为一层列表，下拉列表中的为第二层，布置好html框架。
2.将所有列表项的标号去除（list-style:none;），并且文字居中(text-align:center;)将所有超链接标签的下划线去除（text-decoration:none;）、将超链接转换为块元素(display:block;)。设置超链接的行高(line-height:24px;)（这时所有元素各占一行）
3.设置第一层li标签的行宽（width：120px）以及浮动样式(float:left)，（此时第二层各列表会全部显示在第一层列表的子列表项下，第一层子列表项全部在同一行，向左浮动）届时一定要保证的第二层列表的子列表项和第一层列表想项的宽高一致，否则会混乱。
4.设置第二层列表隐藏（display:none;）
5.设置鼠标悬停在第一层列表子列表项上时或超链接上的动态效果
6.设置鼠标悬停在第一层列表子列表项或超链接上时第二层列表的状态，显示第二层列表（display:block;）宽、高。
7.设置第二层列表的样式
8.设置鼠标悬停在第二层列表子列表项或超链接上时的动态效果
 -->
<html>
<head>
	<meta charset="utf-8">
	<title>下拉导航练习</title>
</head>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
.one{
		border: solid;
		text-align: center;
		height: 300px;
	}
li{
		list-style: none;         /*1.去除列表项无编号*/
		/* height: 100px;*/
		text-align: center;
		 margin: 0 auto;
		 border: solid darkred;
         line-height: 30px;
         background:seagreen;
	}
a{
		display: block;
        text-decoration: none;  /*  2.去除链接的下划线*/
        font:"楷体"  black;
       /* font-size: 20px;*/
       border:solid ;
       line-height: 24px;   /*行高是为了把子列表项占满*/
       background: lightgoldenrodyellow;
        /* 链接a在li中,如果再次给a添加背景颜色的话，会覆盖掉li的颜色，因为设置了a和li的行高一样 要注意颜色的叠加！*/
	}
 .one ul li{
		
		width: 120px; 
		/* 设置第一层列表中子列表项的宽，很重要！！*/
		 float: left; /*设置第一层列表中子列表项全部向左浮动，很重要！！*/
		 border: 1px solid;
	/*	 background: ;*/

    }
   .one ul li ul {
        display: none;    /*设置第二层列表隐藏，很重要！！（1）可以直接设置ul隐藏，（2）也可以设置ul中的li隐藏，只是下面让他显示时要对应便可 .one ul li ul li{
        display: none;}*/


    }
   /* 1.当鼠标悬停在第一层列表的子列表项上时的状态*/
    .one ul li a:hover{
    	font: 27px bold;
    	background: darkorange;
    }
/*2.当鼠标悬停在第一层列表的子列表项上时，第二层列表的状态*/
    .one ul li:hover ul  /*,.one ul li a:hover ul*/{
    	display: block; 
    	 /*显示该列表，因为上面隐藏了该列表*/
    	border: solid;
    	width: 120px;  /*虽说有时候在IE6.0以下的版本浏览器中，li: hover可能没用，但是不可避免a:hover也可能存在无用的情况（该例中便是），所以最好两个都写出来，以并列的形式！！！！*/
    	height: 24px;
    	background: darkorange;
    }
.one ul li ul li a{
	background: red;
	width: 120px;
}
.one ul li ul li a:hover{
	/*background: black;*/
	font: 27px black;
}


</style>
<body>

<div class="one">
	<ul>
		<li><a href="#">首页</a>
			<ul class="two">
				<li><a href="#">最新更新</a></li>
				<li><a href="#">下载排行</a></li>
			
		    </ul>
		</li>
		<li><a href="#">企业新闻</a>
			<ul class="two">
				<li><a href="#">企业介绍</a></li>
				<li><a href="#">最新动态</a></li>

			</ul>
		</li>
		<li><a href="#">产品信息	</a>
			<ul class="two">
				<li><a href="#">最新产品</a></li>
				<li><a href="#">产品列表</a></li>
			</ul>
	    </li>
		<li><a href="#">特价促销</a>
			<ul class="two">
				<li><a href="#"> 促 销</a> </li>
				<li><a href="#">最新推荐</a></li>
				<li><a href="#">产品列表</a></li>
			</ul>
		</li>
		<li><a href="#">联系我们</a>
			<ul class="two">
				<li><a href="#">公司信息</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">公司地图</a></li>
			</ul>
		</li>
		<li><a href="#">新手论坛</a>
			<ul class="two">
				<li><a href="#">你问我答</a></li>
				<li><a href="#">网站大学堂</a></li>
				<li><a href="#"> 论 坛 </a> </li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

@Vivi_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
今日收获：制作下拉式导航需要注意的问题

<!DOCTYPE html> <!-- 布置HTML框架时一定要注意先后向顺序，比如有文字链接的，先把链接打出来在敲文字补救方法：用标签包裹行或选中项: CTRL + shift + W制作导航下拉导航列表步骤：1.先把导航分层，直接显示的为一层列表，下拉列表中的为第二层，布置好html框架。2.将所有列表项的标号去除（list-style:none;），并且文字居中(text-align:center;)将所有超链接标签的下划线去除（text-decoration:non.
复制链接

扫一扫