我采用了复杂的 Accordion Menu 设计,并将 HTML 和 CSS 简化为尽可能基本和干净。
http://soflorealty.com/menu/menu.html
1)“AAA - Expanded”菜单链接以指定的“height: 75px”展开。这意味着我必须计算每个顶级菜单项的组合子菜单“li”列表项的总高度。有没有办法只指定我想要扩展的顶级菜单项而无需确定所需的扩展高度大小?
2)“CCC - 无子菜单”菜单项链接到外部页面(不展开子菜单),因此它只能在文本本身上单击。但是,对于其他子菜单链接,整个“li”标签是可点击的。 我找不到为什么“CCC”不是这种情况的区别。我想让整个 DIV 标签可点击。有任何想法吗?
<div id="acdnmenu">
<ul class="top">
<li><div class="topItem"><div class="arrowImage"></div>AAA - Expanded</div>
<ul style="height: 75px;" c="1">
<li><a href="http://www.Google.com">Google</a></li>
<li><a href="http://www.Yahoo.com">Yahoo</a></li>
<li><a href="http://www.Bing.com">Bing</a></li>
</ul></li>
<li><div class="topItem"><div class="arrowImage"></div>BBB - News</div>
<ul>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.foxnews.com">Fox News</a></li>
<li><div class="sub1"><div class="arrowImage"></div>More News</div>
<ul>
<li><a href="http://www.worldnews.com">World</a></li>
<li><a href="http://www.finance.com">Finance</a></li>
<li><a href="http://www.sports.com">Sports</a></li>
<li><a href="http://www.health.com">Health</a></li>
</ul></li>
</ul></li>
<li><div class="topItem"><a href="http://www.soflorealty.com">CCC - No SubMenu</a></div></li>
</ul>
</div>
#acdnmenu {
width: 240px;
height: 390px;
background-color: rgb(119, 119, 119);
}
#acdnmenu ul.top {
padding-left: 0;
border: 1px solid #000;
visibility: visible;
}
#acdnmenu .topItem {
background: #3A332C url(bg.jpg) repeat-x 0 0;
padding: 8px;
padding-left: 24px;
}
#acdnmenu li {
font: normal 12px Verdana;
color: #A98;
display: block;
}
#acdnmenu ul ul {
background: #484037;
padding-left: 0px;
line-height: 24px;
}
#acdnmenu ul ul ul {background: #655A4E}
#acdnmenu ul ul li {text-indent: 8px}
#acdnmenu ul ul ul li {text-indent: 16px}
/* Top List Item with no subMenu */
#acdnmenu div.topItem a {
color: inherit;
text-decoration:none;
}
#acdnmenu div:hover {
color:#CBA;
text-decoration:none;
}
/* Sub Menu */
#acdnmenu ul ul a, #acdnmenu .sub1 {
color:#CBA;
padding:5px; padding-left:24px;
text-decoration:none;
background:none;
}