CSS下拉菜单

最新推荐文章于 2023-08-14 12:41:21 发布

๑Aurora.

最新推荐文章于 2023-08-14 12:41:21 发布

阅读量1.5k

点赞数 3

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_62755767/article/details/124993041

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

共有三种可悬停的下拉内容：下拉文本，下拉菜单，下拉式图像

一.下拉文本

当用户鼠标悬停到指定文本时，会出现的文本下拉框，下面是效果图：

HTML
<body>
    <div class="wai">
        <span>把鼠标移到我上面</span>
        <div class="xiala">
            <p>Hello World!</p>
        </div>
    </div>
</body>

CSS
<style>
    .wai {
        position: relative;
        display: inline-block;
    }
    
    .xiala {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 100%;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        padding: 12px 16px;
        z-index: 1;
    }
    
    .wai:hover .xiala {
        display: block;
    }
</style>

HTML中：打开下拉菜单的元素可以是任何元素，将下拉菜单内容放在一个div中，将这两个元素放在一个整体的div中

CSS中：外层div需要设置position: relative;，当我们想要设置下拉内容出现位置时，需要用到；内层下拉内容div，一般情况下，利用display: none;可以将它隐藏起来的，box-shadow可以让下拉内容看起来更加立体

二.下拉菜单

与下拉文本不同的是，下拉菜单可以点击下拉菜单中内容，跳转到相应页面，效果图：

HTML
<body>
    <h1>下拉菜单</h1>
    <p>请把鼠标移到按钮上，以打开下拉菜单。</p>
    <div class="wai">
        <button class="anniu">Dropdown</button>
        <div class="xiala">
            <a href="# ">Link 1</a>
            <a href="# ">Link 2</a>
            <a href="# ">Link 3</a>
        </div>
    </div>
</body>

css
<style>
    /* 设置下拉按钮样式 */
    .anniu {
        background-color: #4caf50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
     }
        
    /* 外层容器存放下拉内容和下拉按钮 */
    .wai {
        position: relative;
        display: inline-block;
    }
        
    /* 下拉内容 */
    .xiala {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
        
    /* 下拉菜单中链接 */
    .xiala a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
        
    /* 在链接处悬停时的样式 */
    .xiala a:hover {
        background-color: #f1f1f1;
    }
        
    /* 鼠标悬停在下拉按钮处，显示下拉菜单 */
    .wai:hover .xiala {
        display: block;
    }
        
    /* 显示下拉菜单时，下拉按钮更改颜色 */
    .wai:hover .anniu {
        background-color: #3e8e41;
    }
</style>

如果想控制下拉菜单内容向左对齐还是向右对齐，可以在最外层div标签中设置float属性，设置right: 0;或者left: 0;

三.下拉式图像

HTML
<body>
    <div class="wai">
        <img src="image/dog.jpg" alt="dog" width="100">
        <div class="xiala">
            <img src="image/dog.jpg" alt="dog" width="300">
            <div class="tishi">dog</div>
        </div>
    </div>
</body>

CSS
<style>
    .wai {
        position: relative;
        display: inline-block;
    }
    
    .xiala {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
    
    .wai:hover .xiala {
        display: block;
    }
    
    .tishi {
        padding: 15px;
        text-align: center;
    }
</style>

๑Aurora.

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS下拉菜单

共有三种可悬停的下拉内容：下拉文本，下拉菜单，下拉式图像一.下拉文本当用户鼠标悬停到指定文本时，会出现的文本下拉框，下面是效果图： HTML<body> <div class="wai"> <span>把鼠标移到我上面</span> <div class="xiala"> <p>Hello World!</p&...
复制链接

扫一扫