HTML⼆级下拉菜单常见样式以及常见问题
⽔平导航栏可以有两种实现⽅式：1、浮动；2、inline-block
浮动实现的技术点有:
1、浮动的技术原理
2、 浮动溢出的解决(BCF原理)
3、清除浮动的⽅法
inlind-block实现的技术点不过于把菜单项的display样式设置为inline-block即可，但是这时需要注意的是inline-block⾃带内间距和外间距，如果不希望这些间距影响排版的朋友，可以通过设置菜单项的{margin：0；padding:0;}得以解决。
现在介绍⼀下两种常见的菜单样式、实现⽅式和常见的问题。
悬浮单列下拉
这种样式是通过⿏标悬浮显⽰单列菜单的情况，这种实现⽅式⼀般通过ul和li元素实现，实现步骤如下：
1、建⽴容器
.top-container{
background:#fbfbfb;
height:30px;
min-width: 1500px;
border: 1px solid #e8e8e8;
font-family: 'Tahoma','simsun' !important;
color:#747d87;
margin: 0;
}
<body >
<div class="top-container">
</div>
</body>
结果就是⼀个⽩⾊长条，就不截图了，这⾥需要注意就是各种浏览器对body的外边距实现不⼀，所以⼀般都要对body的样式⾥添加margin: 0;
2、建⽴导航栏容器
.top-wrapper{
width: 1450px;
height: 30px;
border: 1px solid red;
margin: auto;
}
<div class="top-container">
<div class="top-wrapper wrapper">
</div>
</div>
</body>
结果就是居中的导航容器，其中margin:auto;⽤来⽔平居中，这个样式需要注意的是需要条件position:relative；和必须是块级元素
3、建⽴菜单项
<!--导航栏⼀般需要⼀个容器，设置width:100%适应浏览器的⼤⼩变化-->
<div class="top-container container">
<!--导航栏wrapper⼀般设置⼀个固定⼤⼩这样⼦可以通过margin:auto；实现导航栏⽔平居中
由于顶层容器是适应浏览器变化宽度，所以可以保持⽔平导航栏⾃适应浏览器窗⼝宽度保持居中--> <div class="top-wrapper wrapper">
<!--这个是普通导航栏的容器，就是除了"⽴即登陆"和"注册新账号"-->
<div class="nav top-left-nav">
<!--开始实现列表-->
<ul>
<li class="first-nav"><span>站长之家</span></li>
<li class="first-nav"><span>站长论坛</span></li>
<li class="dropdown first-nav"><span>站长⼯具<i class="icon icon-arrow"></i></span>
<ul class="sec-nav">
<li><a href="#">ALEXA排名查询</a></li>
<li><a href="#">百度权重查询</a></li>
<li><a href="#">SEO概况查询</a></li>
<li><a href="#">友情链接查询</a></li>
<li><a href="#">Google PR查询</a></li>
<li><a href="#">Whois信息查询</a></li>
html下拉菜单的制作方法
<li><a href="#">域名备案查询</a></li>
</ul></li>
<li class="dropdown first-nav"><span>站长素材<i class="icon icon-arrow"></i></span>
<ul class="sec-nav">
<li><a href="#">字体下载</a></li>
<li><a href="#">⾼清壁纸</a></li>
<li><a href="#">简历模板</a></li>
<li><a href="#">⾼清图⽚</a></li>
<li><a href="#">⽮量素材</a></li>
<li><a href="#">PSD素材</a></li>
<li><a href="#">PPT模板</a></li>
</ul></li>
<li class="dropdown first-nav"><span>⽹站排⾏<i class="icon icon-arrow"></i></span>
<ul class="sec-nav">
<li><a href="#">⾏业⽹站排名</a></li>
<li><a href="#">地区⽹站排名</a></li>
</ul></li>
<li class="first-nav"><span>⼿机版</span>
<ul class="sec-nav">
<li><a href="#"><span><img src="2.jpg" /></span></a></li>
</ul></li>
<li class="first-nav"><span>⼯具旧版</span></li>
<li class="new first-nav"><span>SEO⼯具包<i class="icon icon-new"></i></span></li>
</ul>
</div>
<div class="nav user-nav">
<ul>
<li class="first-nav"><a href="#">⽴即登录</a></li>
<li class="first-nav"><a href="#">⽴即注册</a></li>
</ul>
</div>
</div>
</div>
.
top-left-nav,.user-nav{ display: inline-block; border: 1px solid red; height: 30px;
}
.nav{
display: inline-block; margin: 0 auto;
padding: 0;
position: relative;
}
.nav:after{
content: "";
display: block;
clear: both;
visibility: hidden;
width: 0px;
height: 0px;
}
.nav ul ,.nav li{
display: block;
position: relative;
margin: 0px;
padding: 0px;
}
.nav a{
text-decoration: none; display: block;
text-align: center;
margin: 0 auto;
}
.first-nav{
text-align: center;
display: block;
margin: 0 auto;
}
.sec-nav{
position: relative;
display: block;
text-align: center;
}
.top-left-nav.first-nav{ /*显⽰具体布局*/
width:130px;
line-height:30px;
}
这时的结果是这样的:
很明显ul列表是垂直排列了，这时就是浮动作⽤体现的时候了，修改first-nav的样式
导航栏的雏形渐渐出现，但是拖在⼀级菜单项的蓝字怎么办呢？
添加样式：
结果很满意，其中diplay:none；就是实现隐藏效果的关键⼀环，说到隐藏，为何不⽤visibility:hidden；呢?其实使⽤display:none；时，元素是不占据任何空间的，相当于就是删除了这个元素；⽽visibility:hidden；元素依旧占据空间，只是变成不可见的状态，也⽆法接受事件，例如不能点击、不能⿏标悬浮等。隐藏是实现了，但是怎么让它重新出现，实现下拉效果呢？既然我们设置display:none把元素隐藏了了，那就把display样式设置可见的样式就⾏了，添加样式 .first-nav {
float: left ;
text-align:center ;
display: block ;
margin:0 auto ; }
.top-left-nav .sec-nav {
margin:0px ;
display: none ;
padding:5px 3px ;
width: 130px ;
z-index:2;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论