0

我什至开始都遇到了麻烦。

当您没有将鼠标悬停在它上面时，我想要一个消失的下拉菜单（顶部框除外）。

该顶部框将出现蓝色背景和白色文本以及图像。

当您悬停时，该框将变成一个黄色的指向箭头框，并且所有其他元素都将显示，并且它们将是黑色的。

一切都会有一个图像（现在的黄色顶部将保持相同的图像）和白色文本。

我该怎么做？

这基本上就是我在这里所拥有的——我假设使用 jQuery 来做到这一点是最好的。

<ul>
<li id="topitem"><img src="blahblahblah1"/>Setup Wizard</li>
<li><img src="blahblahblah2"/>Language</li>
<li><img src="blahblahblah3"/>Password</li>
<li><img src="blahblahblah4"/>Bluetooth Devices</li>
<li><img src="blahblahblah5"/>Network Config</li>
<li><img src="blahblahblah6"/>Finish</li>
</ul>
4

2 回答 2

2

您可以通过在 Jquery 中创建 ul li 来完成此任务，并使用 CSS 来实现这些效果。

<style>
        ul.menu {
            display: block;
            position: relative;
            list-style: none;
            background-color: beige;
            font-weight: bold;
            width: 150px;
        }

        li > ul.subMenu {
            display: none;
            list-style: none;
            background-color: beige;
            font-weight: bold;
            white-space: nowrap;
        }

        ul.subMenu > li {
            display: block;

        }

        li:hover ul.subMenu {
            display: block;
            position: absolute;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li> TEST
            <ul class="subMenu">
                <li id="topitem">
                    <img src="blahblahblah1" />Setup Wizard</li>
                <li>
                    <img src="blahblahblah2" />Language</li>
                <li>
                    <img src="blahblahblah3" />Password</li>
                <li>
                    <img src="blahblahblah4" />Bluetooth Devices</li>
                <li>
                    <img src="blahblahblah5" />Network Config</li>
                <li>
                    <img src="blahblahblah6" />Finish</li>
            </u>

        </li>
    </ul>

</body>
于 2013-09-25T20:07:12.157 回答
1

有很多关于如何做到这一点的教程......我建议找到一个你喜欢的（样式和行为），然后查看 jQuery、HTML 和 CSS 代码以了解它是如何工作的。这里有几个链接可以帮助您入门：

http://css-tricks.com/simple-jquery-dropdowns/

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

于 2013-09-25T19:56:02.807 回答