水平导航条实现总结

最新推荐文章于 2022-02-10 17:23:17 发布

cwzhsi

最新推荐文章于 2022-02-10 17:23:17 发布

阅读量942

点赞数

分类专栏： css 文章标签： after 水平导航条

本文链接：https://blog.csdn.net/cwzhsi/article/details/44937165

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

首先最终实现的图如下:

html代码如下：

<span style="font-size:14px; font-family: 微软雅黑; white-space: pre;">	</span><span style="font-family:KaiTi_GB2312;font-size:12px;"><body>
		<div class="container">
			<ul class="nav">
				<li>Home</li>
				<li>Blog</li>
				<li class="has-submenu">About
					<ul >
						<li>Who we are</li>
						<li>What we do</li>
					</ul>
				</li>
				<li>Pricing</li>
				<li  class="has-submenu">Contact
					<ul>
						<li>Email</li>
						<li>Phone</li>
					</ul>
				</li>
			</ul>
		</div>
	</body></span>

css代码如下：

<span style="font-size:14px; font-family: 微软雅黑; white-space: pre;">		</span><span style="font-family:KaiTi_GB2312;font-size:12px;"><style type="text/css">
			body{
				background-color:#f5f5f5;
				color:#555;
				font-size:1.1em;
				font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
			}
			div.container{
				margin:40px auto;/*这一句实现了居中*/
				max-width:700px;
				text-align:center;
			}
			ul.nav{
				list-style:none;
				padding-left:0;
				display:inline-block;
				text-align:left;
			}
			ul.nav li{
				position:relative;
				color:#fff;
				float:left;
				padding:.65em 1em;
				border:1px solid #eee;
				background-color:#402e4c;
				cursor:pointer;
				-webkit-transition:all .3s;
				transition:all .3s;
			}
			ul.nav li:hover{
				background-color:deepPink;
			}
			li ul{
				position:absolute;
				top:100%;
				left:0%;
				width:150px;
				z-index:1;
				display:none;
			}
			li ul li{
				width:100%;
				left:-40px;
			}
			li:hover ul{
				display:block;
			}
			li.has-submenu:after{
				content:"\25bc";
				font-size:.7em;
				padding-left:5px;
				vertical-align:middle;
			}
			li.has-submenu:hover:after{
				content:"\25b2";
			}
		</style></span>

总结在学习过程中遇到的问题：

1、首先应该的设置body的字体，背景等一些全局样式。

2、在最外层的父容器div.container中设置样式居中，直接利用margin:40px auto来实现。

3、在父元素ul中设置display:inline-block;

4、为了使li元素水平排列，在li元素中设置想左浮动：float：left.

5、如何让li元素的子元素ul排在li元素的下面呢？

关键是：

position:absolute;
top:100%;
left:0%;

6、为了给li后面添加一个标签，利用:after伪元素实现：
li.has-submenu:after{

                    content:"\25bc";
                    font-size:.7em;
                    padding-left:5px;
                    vertical-align:middle;
               }