我正在使用一些javascript来创建单击图像时显示的下拉列表。目前初始图像居中,但下拉框架出现在框架的左侧......我很难过。非常感谢帮助。我的代码如下:
<div align="center" class="dropdown">
<img alt="Select Your District Here" onclick="showMenu()" src="images/buttons/select_district.png" style="width: 200px; height: 36px;" />
<ul aria-labelledby="dLabel" class="dropdown-menu" id="district-dd2" onmouseout="hideMenu()" role="menu" style="display:none">
<li>
<a href="index.php?option=com_zoo&view=frontpage&layout=frontpage&Itemid=512" title="Arbuckle">Arbuckle</a></li>
<li>
<a href="index.php?option=com_zoo&view=frontpage&layout=frontpage&Itemid=514" title="Country Estates">Country Estates</a></li>
<li>
<a href="index.php?option=com_zoo&view=frontpage&layout=frontpage&Itemid=542" title="Strawberry">Strawberry</a></li>
<li>
<a href="index.php?option=com_zoo&view=frontpage&layout=frontpage&Itemid=525" title="Walnut Ranch">Walnut Ranch</a></li>
</ul>
<script type="text/javascript">
function showMenu(){
document.getElementById("district-dd2").style.display="block";
}
function hideMenu(){
document.getElementById("district-dd2").style.display="none";
}
</script></div>
网站可以在这里看到:http://www.waterutilitymanagementservices.com/deloro/water-districts.html
编辑:添加下拉菜单的CSS。仅供参考,这个网站使用joomla beez模板和bootstrap,css经过大量修改。以下代码来自bootstrap.css
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
编辑2:更多CSS - 在搜索完所有的css文件之后,看起来所有对下拉列表的引用都在bootstrap.css中。我在这里发布了CSS作为txt文件,而不是过去所有这些(这将是很长的):http://www.waterutilitymanagementservices.com/boostrap.txt