1、二级导航栏
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex 布局实现 navbar</title>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
background:
font-family: 'Hind', sans-serif;
}
ul {
padding: 0;
}
ul li {
list-style: none;
}
.navbar {
max-width: 820px;
margin: 20 auto 0;
background:
border-radius: 4px;
}
.navbar .menu {
display: flex;
position: relative;
}
.navbar .menu li {
flex: 1;
}
.navbar .menu a {
position: relative;
display: flex;
justify-content: center;
padding: 20px;
color:
text-decoration: none;
}
.container {
position: absolute;
top: 61px;
left: 0;
right: 0;
/*display: flex;*/
display: none;
background:
}
.container__list {
flex: 1;
display: flex;
flex-wrap: wrap;
min-width: 0;
}
.container__listItem {
flex: 0 0 25%;
padding: 10px 30px;
overflow: hidden;
text-align: center;
}
.container__listItem > div {
color:
text-decoration: underline;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.container.has-multi .container__list {
flex-basis: 33.333%;
border-radius: 4px;
}
.container.has-multi .container__listItem {
flex-basis: 100%;
}
.container.has-multi .container__list:not(:last-child) {
border-right: solid 1px
margin-right: 20px;
}
/**hover时li显示不同的背景色*/
.navbar .menu li:hover {
background-color:
}
/*hover时候出现下面的三角形**/
a.hasDropdown :after {
position: absolute;
bottom: -16px;
left: 50%;
z-index: 2;
transform: translateX(-50%);
height: 0;
width: 0;
border: 8px solid transparent;
}
.navbar .menu li:hover a.hasDropdown :after {
content: '';
border-top-color:
}
.navbar .menu li:hover .container {
display: flex;
}
</style>
</head>
<body>
<nav class="navbar">
<ul class="menu">
<li>
<a class="hasDropdown" href="#">Electronics <i class="fa fa-angle-down"></i></a>
<ul class="container">
<div class="container__list">
<div class="container__listItem">
<div>Televisions</div>
</div>
<div class="container__listItem">
<div>MP3, Media Players & Accessories</div>
</div>
<div class="container__listItem">
<div>Audio & Video Accessories</div>
</div>
<div class="container__listItem">
<div>Cameras</div>
</div>
<div class="container__listItem">
<div>DSLR Cameras</div>
</div>
<div class="container__listItem">
<div>Camera Accessories</div>
</div>
<div class="container__listItem">
<div>Musical Instruments & Professional Audio</div>
</div>
<div class="container__listItem">
<div>Gaming Consoles</div>
</div>
<div class="container__listItem">
<div> All Electronics </div>
</div>
<div class="container__listItem">
<div>Air Conditioners</div>
</div>
<div class="container__listItem">
<div>Refrigerators</div>
</div>
<div class="container__listItem">
<div>Washing Machines</div>
</div>
<div class="container__listItem">
<div>Kitchen & Home Appliances</div>
</div>
<div class="container__listItem">
<div>Heating & Cooling Appliances</div>
</div>
<div class="container__listItem">
<div>All Appliances</div>
</div>
</ul>
</li>
<li>
<a class="hasDropdown" href="#">Appliances <i class="fa fa-angle-down"></i></a>
<ul class="container has-multi">
<div class="container__list container__list-multi">
<div class="container__listItem">
<div>Televisions</div>
</div>
<div class="container__listItem">
<div>Home Entertainment Systems</div>
</div>
<div class="container__listItem">
<div>Headphones</div>
</div>
<div class="container__listItem">
<div>Speakers</div>
</div>
<div class="container__listItem">
<div>MP3, Media Players & Accessories</div>
</div>
<div class="container__listItem">
<div>Audio & Video Accessories</div>
</div>
</div>
<div class="container__list container__list-multi">
<div class="container__listItem">
<div>Televisions</div>
</div>
<div class="container__listItem">
<div>Home Entertainment Systems</div>
</div>
<div class="container__listItem">
<div>Headphones</div>
</div>
<div class="container__listItem">
<div>Speakers</div>
</div>
<div class="container__listItem">
<div>MP3, Media Players & Accessories</div>
</div>
<div class="container__listItem">
<div>Audio & Video Accessories</div>
</div>
</div>
<div class="container__list container__list-multi">
<div class="container__listItem">
<div>Televisions</div>
</div>
<div class="container__listItem">
<div>Home Entertainment Systems</div>
</div>
<div class="container__listItem">
<div>Headphones</div>
</div>
<div class="container__listItem">
<div>Speakers</div>
</div>
<div class="container__listItem">
<div>MP3, Media Players & Accessories</div>
</div>
<div class="container__listItem">
<div>Audio & Video Accessories</div>
</div>
</div>
</ul>
</li>
<li>
<a href="#">Kids</a>
</li>
<li>
<a href="#">Men</a>
</li>
<li>
<a href="#">Baby</a>
</li>
<li>
<a href="#">Women</a>
</li>
<li>
<a href="#">Furniture</a>
</li>
<li>
<a href="#">Decors</a>
</li>
<ul>
</nav>
<div class="tranigle">
</div>
</body>
</html>
复制代码