【发布时间】：2013-10-03 04:02:11
【问题描述】：
我有一个运行良好的 2 级 CSS 下拉菜单 - 取自网络。
我对 CSS 很陌生，并试图修改它以使用 3 级，但不幸的是我失败了......
我的第 3 级菜单的屏幕截图失败：
http://i1280.photobucket.com/albums/a498/paul1234562/menu-screen_zpsb180cdfa.jpg
更新：注意三级菜单应该显示在其父菜单的右侧，而不是在它和其他子菜单之上。
您可以在此处查看菜单：
在“加拿大股票”下，当鼠标悬停在“大市”上时，我希望“大盘”子菜单显示第三级菜单选项。
如果一些 CSS 大师可以帮助我完成这项工作，我将不胜感激。
HTML 代码是：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="robots" content="noindex, follow">
<meta name="description" content="">
<meta charset="UTF-8">
<title>Test Menu</title>
</head>
<body>
<!-- Display Main Menu !-->
<nav class="cf">
<nav class="cf">
<!-- menu nav -->
<ul class="topmenu">
<!-- Home -->
<li class="topmenu"><a href="/index.php">Home</a></li>
<!-- Canada Equity ETF -->
<li class="topmenu"><a href="/index.php#eqCanBroadMarket">Canada Equity <img src="/etf-images/down-arrow.jpg"></a>
<ul class="submenu">
<li><a href="/index.php#eqCanBroadMarket">Broad Market</a></li>
<ul class="sub-submenu">
<li><a href="/index.php#eqCanSS"> +++Third level menu option #1</a></li>
<li><a href="/index.php#eqCanREITS">+++Third level menu option #2</a></li>
<li><a href="/index.php#eqCanMC">+++Third level menu option #3</a></li>
</ul>
<li><a href="/index.php#eqCanSS">Sector Specific</a></li>
<li><a href="/index.php#eqCanREITS">REITs (Real Estate Investment Trusts)</a></li>
<li><a href="/index.php#eqCanMC">Mid-Cap and/or Small-Cap</a></li>
<li><a href="/index.php#eqCanMinVol">Minimum Volatility</a></li>
</ul>
</li>
<!-- USA Equity ETF -->
<li class="topmenu"><a href="/index.php#eqUSABroadMarket">USA Equity <img src="/etf-images/down-arrow.jpg"></a>
<ul class="submenu">
<li><a href="/index.php#eqUSABroadMarket">Broad Market</a></li>
<li><a href="/index.php#eqNASDAQ">NASDAQ</a></li>
<li><a href="/index.php#eqUSASmallCap">Small Cap</a></li>
<li><a href="/index.php#eqUSASectorSpecific">Sector Specific</a></li>
<li><a href="/index.php#eqUSAMinVol">Minimum Volatility</a></li>
<li><a href="/index.php#eqUSAHighBeta">High Beta</a></li>
<li><a href="/etfs-active.php">Actively Managed: USA Equity</a></li>
</ul>
</li>
</ul>
</nav>
</nav>
</body>
</html>
CSS代码是：
@charset "utf-8";
/* CSS Document */
html {
background: #E6E3D4;
}
body {
font: 100% Georgia, "Times New Roman", Times, serif;
line-height: 1.2; /* */
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
ul.topmenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
background: #006da6;
height: 2em;
width: 100%;
font: 100% Georgia, "Times New Roman", Times, serif;
font-size: 0.95em;
}
li.topmenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
/* ul.sub-submenu defined - newly added as part of my third level menu mod */
/* ul.submenu defined - works great */
/* ul.topmenu defined - great great */
ul.sub-submenu, ul.submenu, ul.topmenu li a {
display: block;
line-height: 1.8em;
padding: 0 1em;
color: white;
text-decoration: none;
z-index:3;
}
ul.topmenu li a:hover, ul.topmenu li:hover > a {
background: #035c7c;
height: 1.8em;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
text-decoration: none;
}
ul.current, a:hover.current, ul.topmenu li:hover a.current {
background: #AD9B7F;
background: yellow;
color: #eee;
padding-top: .3em;
border-radius: .3em .3em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #917F63;
cursor: default;
}
ul.topmenu li:hover ul {
left: 0;
}
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
ul.submenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
height: 1.8em;
width: 100%;
float: none;
background: #035c7c;
background: pink;
width: auto;
height: auto;
position: absolute;
top: 1.8em;
left: -9000em;
}
ul.submenu li {
float: none;
}
ul.submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.submenu li:last-child a {
border-bottom: none;
}
ul.submenu li a:hover {
background: #15afcb;
background: red;
height: 1.8em;
padding-top: .2em;
top: 0;
border-radius: 0;
text-decoration: none;
}
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
ul.sub-submenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
height: 1.8em;
width: 100%;
float: none;
background: #035c7c;
width: auto;
height: auto;
position: absolute;
top: 1.8em;
left: -9000em;
}
ul.sub-submenu li {
float: none;
}
ul.sub-submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.sub-submenu li:last-child a {
border-bottom: none;
}
ul.sub-submenu li a:hover {
background: #15afcb;
background: brown;
height: 1.8em;
padding-top: .2em;
top: 0;
border-radius: 0;
text-decoration: none;
}
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
【问题讨论】：
-
任何优秀的开发人员都知道，有时切换齿轮是调试问题的一大进步，我知道这个菜单很简陋，但从用户的角度来看似乎不友好，也许考虑更标准化的设计模式许多网民都熟悉。创意可能很好，但这个菜单似乎还有很长的路要走才能在那个层面上得到欣赏，看看不同的“超级菜单”设计，因为你在菜单上覆盖了一个菜单，也许这只是为了您的 SO 问题，但如果不是，则不是一个好的方向
-
开始和结束标签似乎不匹配（
</nav>上方的额外</ul>和</div>）。你能仔细检查一下并更新问题吗？ -
@BrianOgden 非工作菜单的可用性总是很差。 :P 我很确定 OP 并不打算将菜单放在菜单之上。这就是问题所在，这就是 OP 向我们询问的问题。
-
确实如此，但我应该在我的问题描述中说明这一点。损坏的第三级菜单应该显示在其父菜单的右侧 - 而不是在其上方（如我的屏幕截图所示）。
标签： css