HTML/CSS 如何做下拉框（下拉菜单）？

• 前端

一、什么是下拉框

下拉菜单通常使用在鼠标过程中，当鼠标悬停是出现一个下拉的菜单。

二、如何用代码做下拉框

详细操作如下：



    
    
    
    Document
    
        .box{
            /*如果不定基准，默认找 body 做基准*/
            position: relative;
        }
        .select-box{
            display: none;
        }
        .box:hover .select-box{
            display: block;
        }
        .box > span{
            cursor: pointer;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30px;
            width: 90px;
        }
        .select-box{
            width: 90px;
            background-color: antiquewhite;
            position: absolute;
            left: 0px;
            right: 30px;
        }
        .select-box > p{
            cursor: pointer
        }
        .select-box > p:hover{
            background-color: aqua;
        }
    


    
        language
        
            
chinese

            
english

        
    
    
123

总结：

做下拉框，最重要的一点就是要使用 position：relative；找好基准！

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/b7d1375fb8.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐