Question

我想在下拉菜单中提供一些帮助。下拉菜单不会显示在按钮下方的中央位置。而且文本也在白框之外。我是一个关于CSS的真正的noobie。

抱歉英文不好。

<html>
<head>
<title>Menu</title>



<style type="text/css">


body {
    color: #000;
    background-color: #efefef;


}

#wrap   {

    height: 50px; 
    margin: 0; 
    padding: 0; 
    z-index: 1; 
    position: relative; 



    }




.navbar {
    height: 50px;
    position: absolute; /* Ensures that the menu doesn’t affect other elements */
    list-style-type: none;
    }




}           

.navbar li ul li a  {                           

        text-decoration: none; 
        color: black;
        border-radius: 0px;
        text-align: center;
        list-style-type: none;
        clear: both;

            }




.navbar li ul   {
        display: none;  
        height: 100%;                                   
        margin-top: 10px;
            padding: 10px 0px 0px 0px;
        width: 150px;
        border-radius: 10px;
        background-color: #fff;
        text-align: center;
        list-style-type: none;
        clear: both;

        }               

.navbar li:hover ul     {
                        display: block;  
                        }


.navbar a {
margin: 0px auto;
text-decoration: none;
list-style-type: none;
text-align: center;
}





</style>





</head>
<body>
<div id="menu">




<div id="wrap">
         <ul class="navbar">

             <li><a href="#">Retrievals</a>

                    <ul>
                   <li><a href="#">Data Listing</a></li>
                   <li><a href="#">Web Scheduling</a></li>
                   <li><a href="#">Google Maps Application</a></li>
                </ul>         
             </li>

          </ul>
</div>



</div>

</body>
</html>

Answer 1

以下是您的解决方案：

<强> CSS：

#menu{
    position:absolute;
    height:auto;
    width:auto;
}

#wrap{
    position: absolute;
    top: 0px;
    left:0px;
    height: auto;
    width: auto;
    margin: 0px;
}

#wrap ul{
    margin:0px;
    padding: 0px;
    height: auto;
    width: auto;
}

#wrap ul li,#wrap ul li a, #wrap ul li ul li, #wrap li ul li a{
    position: relative;
    list-style: none;
    display: inline-block;
    font-size: 16px;
    font-family: sans-serif;
    text-decoration: none;
    color: #808285;
    padding: 3px 10px 3px 10px;
    transition: all 0.3s ease 0s;
}

#wrap ul li ul{
    position: absolute;
    top: 25px;
    left: 5px;
    width: 132px;
    background-color: #FFFFFF;
}

#wrap ul li ul li{
    position: relative;
    top: auto;
    left: 0px;
    height: auto;
    width: 250px;
    list-style: none;
    display: list-item;
    padding: 3px 5px 3px 5px;
    margin-top: 5px;
}

或者，如果您想在鼠标悬停时显示下拉菜单，请尝试以下操作：

#menu{
    position:absolute;
    height:auto;
    width:auto;
}

#wrap{
    position: absolute;
    top: 0px;
    left:0px;
    height: auto;
    width: auto;
    margin: 0px;
}

#wrap ul{
    margin:0px;
    padding: 0px;
    height: auto;
    width: auto;
}

#wrap ul li,#wrap ul li a, #wrap ul li ul li, #wrap li ul li a{
    position: relative;
    list-style: none;
    display: inline-block;
    font-size: 16px;
    font-family: sans-serif;
    text-decoration: none;
    color: #808285;
    padding: 3px 10px 3px 10px;
    transition: all 0.3s ease 0s;
}

#wrap ul li ul{
    display: none;
    position: absolute;
    top: 25px;
    left: 5px;
    width: 132px;
    background-color: #FFFFFF;
}

#wrap ul li ul li{
    position: relative;
    top: auto;
    left: 0px;
    height: auto;
    width: 250px;
    list-style: none;
    display: list-item;
    padding: 3px 5px 3px 5px;
    margin-top: 5px;
}

#wrap ul li a:hover, #wrap ul li ul li a:hover{
    color: #ba141a;
}

#wrap ul li:hover ul{
    display: block;
}

#wrap ul li ul li:hover{
    border-top: 2px solid #EEEEEE;
    border-bottom: 2px solid #EEEEEE;
}

下拉菜单位于按钮下方

1 个答案: