我有一个2级的CSS dropmenu菜单很好地工作 - 从网上获取。
我对CSS很陌生并尝试将其修改为3级但不幸的是我失败了......
我的第3级菜单的屏幕截图失败：
http://i1280.photobucket.com/albums/a498/paul1234562/menu-screen_zpsb180cdfa.jpg
更新：请注意，第三级菜单应该显示在其父菜单的右侧，而不是它和其他子菜单。
您可以在此处看到菜单：
在“加拿大股权”下，当鼠标悬停在“大市场”上时，我希望“大市场”子菜单显示第三级菜单选项。
如果一些CSS Guru可以帮助我完成这项工作，我会非常感激。
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 */
答案 0 :(得分：0)
我认为使用纯CSS无法做到这一点...请参阅here。您不能通过CSS引用CSS元素。
你可以做的是使用Javascript并动态应用所需的样式。对于您的方案，我将display: none设置为您的类sub-submenu，然后添加了一个JS脚本，以便在悬停时，它会在内部找到任何uls并显示它们。我还将您的sub-submenu移到了li。
在这里工作jsFiddle：http://jsfiddle.net/8kvcN/1/
答案 1 :(得分：0)
最简单的方法是使用jQuery而不是css进行交互。
您可以在此处看到DEMO。
这是jQuery的代码。
$('.submenu li a:first').hover(function(){
$('.sub-submenu').show();
},
function(){
$('.sub-submenu').hide();
});