Question

我在使用jQuery和CSS的Dropdown菜单上提问，下面是我的HTML结构：

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <img src="images/Icons.png" alt="a"/>
            <div class="menu" id="a">
                <ul>
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                </ul>
            </div>
        </td>
        <td>
            <img src="images/Icons.png" alt="b"/>
            <div class="menu" id="b">
                <ul>
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                </ul>
            </div>
        </td>
        <td>
            <img src="images/Icons.png" alt="c"/>
            <div class="menu" id="c">
                <ul>
                    <li><a href="#">link 5</a></li>
                    <li><a href="#">link 6</a></li>
                </ul>
            </div>
        </td>
    </tr>
</table>

我想实现当鼠标移到图像时，div会显示并显示菜单，菜单链接是可点击的，而当鼠标远离图像时，div将被隐藏或用户鼠标离开菜单。

请告知，谢谢。

Answer 1

我真的建议您使用无序列表而不是表格，你的HTML看起来像这样：

<nav id="main-nav">
    <ul>
        <li>
            <a href="#">
                <img src="whatever.jpg" alt="" />
            </a>
            <ul class="dropdown">
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consecteur</a></li>
            </ul>
        </li>
    </ul>
</nav>

你的风格：

#main-nav > ul {}
#main-nav > ul > li {}
#main-nav > ul > li > a {}
#main-nav > ul > li:hover > ul { display:block; }
#main-nav > ul > li > ul { display:none; }
#main-nav > ul > li > ul > li {}
#main-nav > ul > li > ul > li > a {}

您可以使用此html / css制作您想要的作品

Answer 2

我会通过添加两个CSS类来解决这个问题：

.hidden
{
display: none;
width: 0px;
height: 0px;
}

.show
{
/*add any styling desired when showing*/
}

然后鼠标悬停效果：

window.onload = function(){
     document.getElementById('imageId').onmouseover = function() {
          document.getElementById('menuId').classname = 'show';
     }

     document.getElementById('imageId').onmouseout = function() {
          document.getElementById('menuId').classname = 'hidden';
     }
}

然后只需将菜单的默认css类设置为隐藏类，您应该没问题。

如何显示和隐藏下拉菜单？

2 个答案: