0

我有一个ul包含嵌套ul元素的列表。目前它有 3 个级别的深度。（主导航，子，孙）。我似乎无法让下拉菜单工作。不幸的是，我没有能力将 id 放在（ul）项目中。我能做的最好的事情就是把它包起来ul，div上面有一个ID。知道我该怎么做吗？这是我正在使用的代码，如果我的 css 看起来很糟糕或没有意义，我很抱歉。我是这方面的新手。

代码
http://jsfiddle.net/grem28/ZhNDZ/1/ (jsfiddle for CSS)

<div id="nav">
    <ul>
        <li id="but_products" ><a href="/products">Products</a>
            <ul>
                <li id="but_boilers" ><a href="/products/boilers">Boilers</a></li>
            </ul>
        </li>
        <li id="but_resources" ><a href="/resources">Resources</a>
            <ul>
                <li id="but_engineeringLibrary" ><a href="/resources/engineering_library">Engineering Library</a>
                    <ul>
                        <li id="but_detroit" ><a href="/resources/engineering_library/detroit_radiant_mea_numbers">Detroit Radiant MEA numbers</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="but_contactUs" ><a href="/contact_us">Contact Us</a></li>
    </ul>
</div>

达米安

4

1 回答 1

0

这是一个正常运行的 3 层 CSS 下拉导航系统的示例：

HTML

<nav>
    <ul>
        <li>
            Menu One
            <ul>
                <li>
                    <a href="#">Menu One Item One</a>
                    <ul>
                        <li><a href="#">Menu One Item One Submenu Item One</a></li>
                        <li><a href="#">Menu One Item One Submenu Item Two</a></li>
                        <li><a href="#">Menu One Item One Submenu Item Three</a></li>
                        <li><a href="#">Menu One Item One Submenu Item Four</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Menu One Item Two</a>
                    <ul>
                        <li><a href="#">Menu One Item Two Submenu Item One</a></li>
                        <li><a href="#">Menu One Item Two Submenu Item Two</a></li>
                        <li><a href="#">Menu One Item Two Submenu Item Three</a></li>
                        <li><a href="#">Menu One Item Two Submenu Item Four</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Menu One Item Three</a>
                    <ul>
                        <li><a href="#">Menu One Item Three Submenu Item One</a></li>
                        <li><a href="#">Menu One Item Three Submenu Item Two</a></li>
                        <li><a href="#">Menu One Item Three Submenu Item Three</a></li>
                        <li><a href="#">Menu One Item Three Submenu Item Four</a></li>
                    </ul>
                </li>
                <li>
                  <a href="#">Menu One Item Four</a>
                    <ul>
                        <li><a href="#">Menu One Item Four Submenu Item One</a></li>
                        <li><a href="#">Menu One Item Four Submenu Item Two</a></li>
                        <li><a href="#">Menu One Item Four Submenu Item Three</a></li>
                        <li><a href="#">Menu One Item Four Submenu Item Four</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Menu Two
            <ul>
                <li><a href="#">Menu Two Item One</a></li>
                <li><a href="#">Menu Two Item Two</a></li>
                <li><a href="#">Menu Two Item Three</a></li>
                <li><a href="#">Menu Two Item Four</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

body { font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; }
a:hover { color: #cc0000; }

/* Hide submenu */
nav ul > li > ul,
nav ul > li > ul > li > ul { display:none; }

/* Layout menubar and menus */
nav { background:#ddd; padding:0.25em 0.5em; }
nav > ul > li { cursor: pointer; display:inline-block; padding:0 1em; }
nav > ul > li > ul { background: #ddd; padding:0.5em; position: absolute; z-index: 1000; }
nav > ul > li > ul > li > ul { background: #ccc; padding:0.5em; position: absolute; left: 90%; top: 0; z-index: 1001; }

/* show submenu on hover */
nav ul > li:hover > ul,
nav ul > li > ul > li:hover > ul { display:block; width:10em; }

小提琴：http: //jsfiddle.net/kboucher/nrAPu/

希望这可以帮助。

于 2013-02-18T21:51:50.097 回答