0

我正在使用一些 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&amp;view=frontpage&amp;layout=frontpage&amp;Itemid=512" title="Arbuckle">Arbuckle</a></li>
        <li>
            <a href="index.php?option=com_zoo&amp;view=frontpage&amp;layout=frontpage&amp;Itemid=514" title="Country Estates">Country Estates</a></li>
        <li>
            <a href="index.php?option=com_zoo&amp;view=frontpage&amp;layout=frontpage&amp;Itemid=542" title="Strawberry">Strawberry</a></li>
        <li>
            <a href="index.php?option=com_zoo&amp;view=frontpage&amp;layout=frontpage&amp;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 模板，对 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

4

0 回答 0