Question

即使开始我也遇到了麻烦。

我想要一个下拉菜单，当你没有悬停在它上面时，它会消失（顶盒除外）。

该顶部框将显示蓝色背景和白色文字以及图像。

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

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

我该怎么做？

这基本上就是我在这里 - 我假设使用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>

Answer 1

您可以通过在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>

Answer 2

有很多关于如何做到这一点的教程...我建议找一个你喜欢的（风格和行为），然后查看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/

如何使用jQuery创建一个下拉菜单

2 个答案: