来啦，前端面试实操题第二道，依旧是15分钟的时间，写一个二级菜单；不过在文章里写的是如何实现三级菜单，不影响哈，就是加一层结构而已。
先看最终效果：
这个呢，首先要知道会使用到哪些知识点，我主要用的是无序列表ul，元素模块切换display以及定位position。
咱们先详细了解一下定位吧，上一篇那个其实也用到了定位，但我没有详细说，这里补一个。
定位 = 定位模式 + 边偏移量
定位模式：一个元素在文档中的定位方式
边偏移量：决定该元素的最终位置
定位有五种模式，static，fixed，sticky，relative以及absolute。
static就是默认情况下的静态定位，就是没开定位的意思。
而fixed是固定定位，一旦给元素设置了固定定位，元素就会定死在页面的某一个位置，不带挪窝的，fixed脱离了标准流，不再占据之前的空间；常用于页面最顶部的导航栏或者页面右下角那个返回顶部按键。
而sticky是一种粘性定位，它也是钉死在页面上不动的，但它在此之前会跟着页面动，移动到要偏移（定位）的地方它就不动了；但是它没有完全脱标，因为它还占据着之前的空间；它常用来做吸顶效果的那种导航栏。而且必须设置了偏移量才起作用
而relative（相对定位）是根据自身的位置来偏移，并且会随着页面的移动而移动，并且占据原空间，没有脱离标准流；必须设置了偏移量才起作用
absolute（绝对定位）是根据已经设置了定位属性的父元素的位置进行偏移，不占据原有空间，已脱离标准流，通常情况下和相对定位一起使用。
OK，了解完了定位，我们就开始写菜单了。
首先创建一个盒子，然后在盒子里创建一个无序列表，做一级菜单，<li></li>标签里面不仅有文本，还应该有一个a标签，因为菜单肯定是要点击后可以跳转的，所以这样设置有助于之后我们添加链接地址。
<div class="box">
<ul class="first_nav">
<li>
<a href="#">一级菜单-选项一
</li>
<li>
<a href="#">一级菜单-选项二
</li>
</ul>
</div>这样就会生成一列列表，并且带有无序列表前面的小点点以及a链接的颜色和下划线
通过使用标签选择器将把这些属性都去除掉。
ol,
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}然后要给li开浮动，让它们从上下布局变成左右布局；并且存在一个小问题，我们通常点击一个菜单时，无论点击文字还是文字附近的那一圈都是会跳转的，只要点进那个框框里鼠标就会变成小手，然后跳转。但是a标签本身只是一个行内标签，在初始状态下只有点击到文字才可以跳转，那要怎么设计才能让实现前一种效果呢
这时候就要用到display属性了，这是改变元素模式的属性；我们可以使用它让a标签转为块级元素，就可以设置a标签的宽高，成为一个导航的小盒子，这样只要点击这个盒子（也就是一个导航框）就会实现跳转。
.first_nav>li>a {
display: block;
width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
cursor: pointer;
}到目前为止，一个一级菜单就算完成了。
二级菜单则是在一级菜单的每一个选项（a标签）内添加一个列表，然后在点击一级菜单之前不显示，鼠标移到一级菜单的框时对应的二级菜单才会显示。这里设涉及到了元素的显示与隐藏，有多种方式这里用的是display；鼠标点击前二级菜单设为display：none；点击后display设置为block，即可显示。
我们会发现二级菜单是显示在一级菜单的下方，是因为一级菜单内放不下，内容会往下掉，所以在下方显示，并且会影响导致该位置的原有元素被挤走。我们可以使用定位给二级菜单设置绝对定位，让它的父元素也就是a标签开启相对定位，然后将二级菜单定位至一级菜单下方，但它脱离了标准流不会占据空间，只是会在显示时挡住下方元素，鼠标挪走下方元素就照常显示。
也是和二级菜单设置一样，不过定位时需定位到父元素的右边，因为定位在下方会挡住其他二级菜单。
emmmmm，我已经不知道该怎么说了，大致结构就是这样，源代码直接看下面。但是我写的二级菜单那里没有用定位，大家用的话还是定位一下比较好，以后放到页面使用就不用再改了。
HTML代码
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
<div class="box">
<ul class="first clear">
<li><a href="#">一级</a>
<ul class="second">
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一级</a>
<ul class="second">
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一级</a>
<ul class="second">
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
<li><a href="#">二级</a>
<ul class="third">
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
<li><a href="#">三级</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>CSS代码
<style>
*{
margin: 0;
padding: 0;
}
.clear::after{
content: " ";
display: block;
clear: both;
}
ul{
list-style: none;
}
.first li{
float: left;
width: 100px;
}
.box{
width: 300px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: orange;
}
a{
text-decoration: none;
display: block;
color: white;
font-size: 20px;
background-color: orange;
}
.second{
display: none;
}
.second>li>a{
background-color: gold;
}
.third>li>a{
background-color: rgb(235, 224, 162);
}
.box ul li:hover .second{
display: block;
}
.second>li{
position: relative;
}
.third{
position: absolute;
top: 0px;
left: 100px;
display: none;
}
.box ul li ul li:hover .third{
display: block;
}
</style>好吧，朋友们，我写的很烂，大家随意看看
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
