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

<!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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

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

友情链接更多精彩内容