利用css基础创建二级导航栏（下拉菜单）

目的：使用CSS创建一个鼠标一上去之后显示下拉菜单的效果。

 

思路分析
HTML部分

　　使用任何HTML元素来打开下拉菜单，比如<span>、<li>。

　　使用容器元素（如：div）来创建下拉菜单的内容，并放在你准备放置的位置上。

　　使用div来包裹这些元素，然后用CSS来设置下拉菜单的样式。

　　实例：

　　　　<div class="dropdown">

　　　　　　<button class="dropbtn">点我出下拉菜单</button>

　　　　　　<div class="dropdown-content">

　　　　　　　　<a href="#">我是一号下拉菜单</a>

　　　　　　　　<a href="#">我是二号下拉菜单</a>

　　　　　　　　<a href="#">我是三号下拉菜单</a>

　　　　　　</div>

　　　　</div>

 

CSS部分

　　.dropdown类（给容器元素定义一个叫dropdown的类名）使用position:relative来确定下拉菜单内容的放置位置，下来菜单会出现在下拉按钮（使用position：absolute）的右下角。简单来想，就是使用容器的相对定位来确定下拉菜单的绝对定位位置。语句：.dropdown{position:relative;}

　　.dropdown-content类，你要设置的下来菜单div。默认是隐藏的，平时看不见（display：none；）。在鼠标移动到指定元素后显示。

　　:hover选择器用于在用户将鼠标移动到下拉菜单按钮上时显示下拉菜单。（li:hover{display:block;})

　　使用box-shadow属性让下拉菜单看起来想一个卡片。

　　实例：

　　　　设置下拉菜单的样式

.dropbtn {

 

    background-color: #4CAF50;

 

    color: white;

 

    padding: 16px;

 

    font-size: 16px;

 

    border: none;

 

}

　　　　容器<div>-定位下拉内容

　　　　　　

.dropdown {

 

    position: relative;

 

    display: inline-block;

 

}

　　　　下拉内容-不点击时隐藏-使用绝对定位让它脱离文档流

　　　　　　

.dropdown-content {

 

    display: none;

 

    position: absolute;

 

    background-color: #f9f9f9;

 

}

　　　　鼠标移上去后修改下拉菜单链接颜色

　　.dropdown-content a:hover {background-color: #f1f1f1}

　　　　　　

　　　　鼠标一上去后显示下拉菜单

　　.dropdown:hover .dropdown-content {

 

    　　display: block;

}

　　　　当下拉菜单内容显示后修改下来按钮的背景颜色

.dropdown:hover .dropbtn {

 

    background-color: #3e8e41;

 

}

红色为重点 

 

 下拉菜单内容的对齐方式

　　float：left 　　方向从左到右

　　float：right　　方向从右到做

　　实例：

　　　　.dropdown-content{

right:0;
}

 

实例效果展示

　　

 

 

2017-07-02 23:06:18