0

我为客户创建了一个自定义下拉菜单：

这是HTML：

<div id="dropdown">
        <div id="dropdownMenu">
                <a href="#" class="blue" onclick="return dropMenu()" id="selectedOption">LearnPal Free Trial</a>
        </div><!--drop menu ends-->
        <div id="dropdownMenuOptions">
                <a href="#" class="blue" onclick="return changeSelection('LearnPal Free Trial')">LearnPal Free Trial</a><br />
                <a href="#" class="blue" onclick="return changeSelection('LearnPal Teach')">LearnPal Teach</a><br />
                <a href="#" class="blue" onclick="return changeSelection('LearnPal Pro')">LearnPal Pro</a><br /> 
                <a href="#" class="blue" onclick="return changeSelection('LearnPal MDM')">LearnPal MDM</a><br /> 
                <a href="#" class="blue" onclick="return changeSelection('LearnPal Secure Browser')">LearnPal Secure Browser</a><br />        
        </div>
    </div><!--drop down ends-->

这是用于此的CSS：-

#dropdown{
width:100%;
height:56px;
margin-top:15px;
}
#dropdownMenu{
width:256px;
height:56px;
margin:auto;
border-radius:8px;
background-image:url(../images/dropdown.png);
background-position:top center;
background-repeat:no-repeat;
}
#dropdownMenu:hover{
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-kthtml-transition: all 0.2s linear;
transition: all 0.2s linear;    
-moz-box-shadow:0px 5px 5px 1px rgba(3, 2, 2, 0.3);
-webkit-box-shadow:0px 5px 5px 1px rgba(3, 2, 2, 0.3);
box-shadow:0px 5px 5px 1px rgba(3, 2, 2, 0.3);
}
#dropdownMenu a{
position:inherit;
z-index:10000;
float:left;
width:230px;
height:27px;
padding-top:8px;
margin-top:10px;
margin-left:10px;
}
#dropdownMenuOptions{
z-index:1000;
position:absolute;
display:none;
width:250px;
height:0px;
padding:0px;
margin-left:365px;
background-color:#f0f0f0;
border-radius:8px;
-moz-box-shadow:2px 2px 8px 3px rgba(3, 2, 2, 0.5);
-webkit-box-shadow:2px 2px 8px 3px rgba(3, 2, 2, 0.5);
box-shadow:2px 2px 8px 3px rgba(3, 2, 2, 0.5);
}
#dropdownMenuOptions a{
position:relative;
z-index:10000;
float:left;
padding:5px;
padding-top:10px;
padding-bottom:5px;
width:240px;
height:30px;
}

这在我的 PC 上的 Chrome、safari、Firefox 和 IE 中完美运行。但是客户抱怨下拉列表中的文本没有显示。只有下拉菜单打开，里面没有选项显示。

我已经使用 jQuery 制作了下拉效果，但是由于下拉菜单可以正确打开和关闭，并且只有文本没有显示，我猜测它只有 CSS 有问题。你能帮我解决这个问题吗？

谢谢你，瓦西克·加兹纳维。

4

0 回答 0