-2

我对使用 jQuery 和 CSS 的下拉菜单有疑问，下面是我的 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会被隐藏或用户鼠标离开菜单。

请指教，谢谢。

4

2 回答 2

3

伙计，我真的建议您使用无序列表而不是表格，您的 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 来制作您想要的作品

于 2013-06-07T22:42:49.997 回答
0

我会通过添加两个 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 类设置为隐藏类，就可以了。

于 2013-06-06T16:56:11.100 回答