CSS之dropdown

来源：互联网发布：弱水三千歌词知乎编辑：程序博客网时间：2024/06/06 19:12

下拉菜单中的选项可以是文本，图片的放大或者是链接，在这里使用的是链接，但是链接是打不开的，因为仅仅是测试
index.html

<!DOCTYPE html><html lang="en"><head>    <link rel="stylesheet" href="style.css"/>    <meta charset="utf-8"></head><body>    <h1>Dropdown Menu</h1>    <p><span>Note:</span>Move the mouse over the button please.</p>    <div class="dropdown">        <button class="dropbtn">dropdown        </button>        <div class="dropdown-content">            <a href="#link1">link1</a>            <a href="#link2">link2</a>            <a href="#link3">link3</a>        </div>    </div></body></html>

style.css

/* * @Author: Lin* @Date:   2017-07-15 17:22:54* @Last Modified by:   Lin* @Last Modified time: 2017-07-15 17:48:31*/div.dropdown {    position:relative;    display:inline-block;}span {    font-weight:bold;}button.dropbtn {    background-color: #AA0000;    color:white;    cursor:pointer;    font-size:25px;    padding:8px;}div.dropdown-content {    display:none;    position:absolute;    background-color:#EEEEEE;    width:160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}.dropdown-content a {    display:block;    text-decoration:none;    color:black;    padding:12px 15px;}/*注意这里不是.dropbtn:hover，因为dropbtn是一个button,不能够用hover*/.dropdown:hover .dropdown-content {    display:block;}.dropdown-content a:hover {    background-color:#DDDDDD;}.dropdown:hover .dropbtn {    background-color:#880000;}

主要是通过display:none来display:block来进行控制。
显示的效果为：
这里写图片描述

阅读全文

0 0