Day1-CSS-下拉菜单

一、CSS 下拉菜单　　

　　　　　　　　-----使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

1、基本下拉菜单

<div class="dropdown">
        <span>鼠标移动到我这！</span>
        <div class="dropdown-content">
            <p>菜鸟教程</p>
            <p>www.runoob.com</p>
        </div>
    </div>

　　

 <style>
        .dropdown{
            position: relative;
            display: inline-block;
        }
        .dropdown-content{
            display: none;  /*消失，不显示*/
            position: absolute;   /*直接接在父的后面*/
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .dropdown:hover .dropdown-content{
            display: block;  /*如果碰到的话span就变成了块级的，就可以显示出来了*/
        }
    </style>

　　

2、创建下拉菜单，并允许用户选取列表中的某一项

   <div class="dropdown">
        <button class="dropbtn">下拉菜单</button>
        <div class="dropdown-content">
            <a href="#home">主页</a>
            <a href="#home">主页</a>
            <a href="#home">主页</a>
        </div>
    </div>

CSS

 <style>
        .dropbtn{
            background-color: #4caf50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;/*碰到这个按钮的话鼠标就会变成箭头了*/
        }
        .dropdown{
            position: relative;
            display: inline-block;
        }
        .dropdown-content{
            position: absolute;
            min-width: 100%;
            display: none;
            background-color: #f9f9f9;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .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 .dropbtn{
            background-color: #3e8e41;
        }
    </style>

扩展：

.dropdown-content {
    right: 0;
}

通过这样可以让这个菜单在左边还是右边的

 

3、碰到图片将显示更大的图片

  <div class="dropdown">
        <img src="../image/view1.jpg" alt="" width="250px" height="250px">
        <div class="dropdown-content">
            <img src="../image/view1.jpg" alt="" width="500px" height="500px">
            <div class="desc">hzy笨蛋！</div>
        </div>
    </div>

CSS

 

4、导航条下拉

<ul>
        <li><a href="#home" class="active">主页</a> </li>
        <li> <a href="#news">新闻</a></li>
        <div class="dropdown">
            <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content">
                <a href="#">链接1</a>
                <a href="#">链接1</a>
                <a href="#">链接1</a>
            </div>
            
        </div>
    </ul>

 <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li{
            float: left;
        }
        li a, .dropbtn{
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover, .dropdown:hover, .dropbtn{
            background-color: #111;
        }
        .dropdown{
            display: inline-block;
        }
        .dropdown-content{
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .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;
        }
    </style>