纯html,css实现hover某项展示下拉菜单

2020-06-24  本文已影响0人  优秀的收藏转载分享
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #nav,
    #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #nav li {
        float: left;
        position: relative;
        width: 10em;
        border: 1px solid #B0C4DE;
        background-color: #E7EDF5;
        color: #2D486C;
        font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
        margin-right: 1em;
    }

    #nav a:link,
    #nav a:visited {
        display: block;
        text-decoration: none;
        padding-left: 1em;
        color: #2D486C;
    }

    #nav ul {
        display: none;
        position: absolute;
        padding-top: 0.5em;
    }

    #nav ul li {
        float: none;
        border: 0 none transparent;
        border-bottom: 1px solid #E7EDF5;
        background-color: #F1F5F9;
        font-size: 100%;
        margin: 0;
        margin-bottom: 0.5em;
        padding: 0;
    }
    /*使用该样式过程种注意html的层级关系*/
    #nav li:hover ul {
        display: block;
    }
</style>
</head>

<body>
    <ul id="nav">
        <li><a href="#">Starters</a>
            <ul>
                <li><a href="#">Fish</a></li>
                <li><a href="#">Fruit</a></li>
                <li><a href="#">Soups</a></li>
            </ul>
        </li>
        <li><a href="#">Main courses</a>
            <ul>
                <li><a href="#">Meat</a></li>
                <li><a href="#">Fish</a></li>
                <li><a href="#">Vegetarian</a></li>
            </ul>
        </li>
        <li><a href="#">Desserts</a>
            <ul>
                <li><a href="#">Fruit</a></li>
                <li><a href="#">Puddings</a></li>
                <li><a href="#">Ice Creams</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>

效果图如下:


hover.png
上一篇下一篇

猜你喜欢

热点阅读