如何创建垂直/水平嵌套 CSS 菜单？

Question

所以，我对 CSS 非常失望，主要是硬件专家/刚刚学习编写 html / css 的人。 我在我们公司网站上继承了一些不太好的 CSS 菜单，并且我正在尝试添加一个二级嵌套菜单，因为我们开始有一些突破性的部门页面。 另外，我很确定我们的大量“.vertical-nav”东西甚至没有被使用，只是弄乱了我们的自定义 CSS。 任何帮助将不胜感激......我正在学习，但 CSS 绝对比我想象的要复杂一些。

 .vertical-nav { height:auto; list-style:none; width: 100%; margin: 20px 0 0 0; -webkit-transition: background-color 5s; transition: background-color 5s; }.vertical-nav li { height: 40px; margin: 0; padding: 8px 0; background-color: #eee; border: none; text-align: center; display: inline-block; float: left; clear:both; width: 230px; -webkit-transition: background-color 1s; transition: background-color 1s; }.vertical-nav li:hover { background-color:#9FB6CD; color:#FFFFFF; }.vertical-nav li a { font-family: "Trebuchet MS", Helvetica, sans-serif font-size:20px; font-weight:bold; color:#35586C; text-decoration:none; }.vertical-nav li.current { background-color:#517693; }.vertical-nav li.current a { color:#FFFFFF; } vertical-nav ul li ul { display:none; list-style-type:none; width:125px; padding:0px; margin-top:3px; margin-left:-5px; position:relative; top: -40px; } vertical-nav ul li:hover ul { display:block; } vertical-nav ul li:hover ul li { background-color:#555555; width:125px; height:30px; padding: 8px 0; display:inline-block; } vertical-nav ul li ul li:hover { background-color:#333333; } vertical-nav ul li ul li a { color:#FFF; text-decoration:underline; } vertical-nav ul li ul li a:hover { text-decoration:none; }.vertical-nav li ul { display: none; margin-top: 10px; padding: 0; }.vertical-nav li:hover ul { display: block; }.vertical-nav li:hover.sub-menu { display: table; }.sub-menu li { width: 230px; min-width: 100px; white-space: nowrap; display:table-row; z-index:1; position:relative; margin-left:250px; top: -43px; left: -20px; }.sub-menu li a { display:inline-block; padding: 0 0 0px; }.sub-menu li ul{ display: none margin-top: 10px; padding: 0; }.sub.menu li:hover ul{ width: 230px; min-width: 100px; white-space: nowrap; display:table-row; z-index:1; position:relative; margin-left:250px; top: -43px; left: -20px; }

 <ul class="vertical-nav"> <div id="Homehome"> <li><a href="link">Service Desk Home</a></li> </div> <li><a href="link">Services</a> <ul class="sub-menu"> <li><a href="link">Web</a></li> <li><a href="link">Virtual Server Hosting</a></li> <li><a href="link">VMware</a></li> <li><a href="link">Virtual Computing</a></li> </ul> </li> <li><a href="link">Printing</a> <ul class="sub-menu"> <li><a href="link">wpa printing</a></li> <li><a href="link">Poster Printing</a></li> </ul> </li> <li><a href="link">Computing Policies</a> <ul class="sub-menu"> <li><a href="link">Operating Systems</a></li> <li><a href="link">Hardware</a></li> <li><a href="link">Software</a></li> <li><a href="link">Mobile Devices</a></li> <li><a href="link">Printers</a></li> <li><a href="link">Surplus</a></li> </ul></li> <li><a href="link">Departmental Security</a></li> <li><a href="link">IT Loaner Equipment</a></li> <li><a href="link">Networking</a></li> <li><a href="link">Video Tutorials</a></li> <li><a href="link">Service Desk FAQs</a></li> <li><a href="link">Purchasing a Computer</a></li> <li><a href="link">Department Specific Pages</a> <ul class="sub-menu"> <li><a href="link">Biology</a></li> <ul> <li><a href="link">Biology Policy</a></li> </ul> <li><a href="link">Chemistry</a></li> </li> </ul>

任何帮助将不胜感激......我正在努力学习嵌套的 CSS 东西......我已经能够在大部分网站设计中摆弄自己的方式，但这让我很难过...... . 无论我做什么，第二个子菜单都会崩溃。

Answer 1

有很多方法可以构建嵌套的 CSS 菜单。

下面的方法给出了.submenu ：

• max-height为0
• margin为0

然后在父li悬停时更改这些值。

工作示例：

 .vertical-nav, .vertical-nav ul { width: 220px; padding-left: 0; list-style-type: none; }.vertical-nav ul { max-height: 0; margin: 0; overflow: hidden; transition: all 0.3s ease-out; }.vertical-nav li { padding: 6px; line-height: 20px; font-family: sans-serif; font-size: 14px; font-weight: normal; background-color: rgb(191, 0, 0); }.vertical-nav li a { color: rgb(255, 255, 255); }.vertical-nav li:hover { font-weight: bold; background-color: rgb(163, 0, 0); }.vertical-nav li:hover > ul { max-height: none; margin: 12px 12px 6px; overflow: visible; }.vertical-nav li:hover li { background-color: rgb(127, 0, 0); }.vertical-nav li li:hover li { background-color: rgb(91, 0, 0); }

 <ul class="vertical-nav"> <li><a href="link">Service Desk Home</a></li> <li><a href="link">Services</a> <ul class="sub-menu"> <li><a href="link">Web</a></li> <li><a href="link">Virtual Server Hosting</a></li> <li><a href="link">VMware</a></li> <li><a href="link">Virtual Computing</a></li> </ul> </li> <li><a href="link">Printing</a> <ul class="sub-menu"> <li><a href="link">wpa printing</a></li> <li><a href="link">Poster Printing</a></li> </ul> </li> <li><a href="link">Computing Policies</a> <ul class="sub-menu"> <li><a href="link">Operating Systems</a></li> <li><a href="link">Hardware</a></li> <li><a href="link">Software</a></li> <li><a href="link">Mobile Devices</a></li> <li><a href="link">Printers</a></li> <li><a href="link">Surplus</a></li> </ul> </li> <li><a href="link">Departmental Security</a></li> <li><a href="link">IT Loaner Equipment</a></li> <li><a href="link">Networking</a></li> <li><a href="link">Video Tutorials</a></li> <li><a href="link">Service Desk FAQs</a></li> <li><a href="link">Purchasing a Computer</a></li> <li><a href="link">Department Specific Pages</a> <ul class="sub-menu"> <li><a href="link">Biology</a> <ul> <li><a href="link">Biology Policy</a></li> </ul> <li><a href="link">Chemistry</a></li> </ul> </li> </ul>