CSS3学习--下拉菜单 

<!DOCTYPE html>
<html>
<head>

<title>下拉菜单实例(runoob.com)</title>
<meta charset="utf-8">
<style>
/* 容器 <div> - 需要定位下拉内容 */
.dropdown{
    display:inline-block;
    position:relative;
}

/*下拉按钮样式*/
.dropdownbtn{
    background-color: #4CAF50;
    color: white;
    padding: 16px; /*按钮文字到边框的距离*/;
    font-size: 16px; 
    border: none;
    cursor: pointer;
}

/*下拉内容(默认隐藏)*/
.dropdown-content{
    display: none;
    position: absolute;  /*使元素可以和其他元素重叠，不会造成下拉菜单出现导致其他样式移位的现象*/
    background-color: #f9f9f9;
    min-width: 160px;  /*对元素的宽度设置一个最小限制*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)/*向框添加一个或多个阴影 box-shadow: h-shadow（必须） v-shadow（必须） blur spread color inset */
  
}

/*下拉菜单的链接*/
.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;  /*除去超链接的下划线*/
    display: block;  /*使菜单变成竖排排列*/
   
}

/*鼠标移上去后修改下拉菜单链接颜色*/
.dropdown-content a:hover{background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropdownbtn {
    background-color: #3e8e41;
}


</style>
</head>
<body>
<div class="dropdown">
    <button class="dropdownbtn">menu</button>
          <div class="dropdown-content">
                <a href="#">vita fede</a>
                  <a href="#">tiffany</a>
                 <a href="#">cartier</a>
          </div>
</div>


</body>
</html>

 

posted @ 2016-04-14 20:07  DarthBadwolf  阅读(231)  评论(0)    收藏  举报