Html 仅使用css创建下拉导航
我有一个包含嵌套Html 仅使用css创建下拉导航,html,css,Html,Css,我有一个包含嵌套ul元素的ul列表。目前它有3层深。(主导航、子导航、孙子导航)。我似乎无法让下拉列表发挥作用。不幸的是,我没有能力在(ul)项目中放置id。我所能做的就是将ul封装在div中,并在其上添加ID。你知道我该怎么做吗?这是我正在使用的代码,如果我的css看起来不好或毫无意义,我很抱歉。我是这方面的新手 代码 (CSS的JSFIDLE) damien以下是一个功能强大的三层CSS下拉式导航系统的示例: HTML 小提琴: 希望这有帮助 <d
ul
元素的ul
列表。目前它有3层深。(主导航、子导航、孙子导航)。我似乎无法让下拉列表发挥作用。不幸的是,我没有能力在(ul)项目中放置id。我所能做的就是将ul
封装在div
中,并在其上添加ID。你知道我该怎么做吗?这是我正在使用的代码,如果我的css看起来不好或毫无意义,我很抱歉。我是这方面的新手
代码(CSS的JSFIDLE)
-
-
-
damien以下是一个功能强大的三层CSS下拉式导航系统的示例: HTML 小提琴: 希望这有帮助
<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>
<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>
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; }