Question

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

这是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;
}

这适用于我的电脑上的Chrome，Safari，Firefox和IE。但客户抱怨下拉列表中的文字没有显示。只有下拉列表打开，里面没有选项显示。

我已经使用jQuery制作了下拉效果，但由于下拉列表正确打开和关闭，只有文本没有显示，我猜它只有CSS有问题。你能帮帮我吗？

谢谢你， Wasiq Ghaznavi。

自定义下拉菜单不会在Chrome中显示文字

0 个答案: