CSS手风琴菜单-如何展开和超链接<；部门>；

我采用了复杂的手风琴菜单设计，并将HTML和CSS简化为尽可能基本和干净的

1） “AAA-扩展”菜单链接以指定的“高度：75px”展开。这意味着我必须计算每个顶级菜单项的组合子菜单“li”列表项的总高度有没有一种方法可以只指定要展开的顶级菜单项，而不必确定所需的展开高度大小？

<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; 
}

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; 
}

AAA-扩展
高度：75px；c=“1”>




BBB-新闻




更多新闻









#acdnmenu{
宽度：240px；
高度：390px；
背景色：rgb（119、119、119）；
}
#acdnmenu ul.top{
左侧填充：0；
边框：1px实心#000；
能见度：可见；
}
#acdnmenu.topItem{
背景：#3a332curl（bg.jpg）repeat-x0；
填充：8px；
左侧填充：24px；
}
#ACDNLI{
字体：普通12px Verdana；
颜色：#A98；
显示：块；
}
#ACDNUL{
背景:#484037；
左侧填充：0px；
线高：24px；
}
#acdnmenu ul{背景：#655A4E}
#acdnmenu ul li{文本缩进：8px}
#acdnmenu ul li{文本缩进：16px}
/*没有子菜单的顶级列表项*/
#acdnmenu div.TOP项目a{
颜色：继承；
文字装饰：无；
}
#acdnmenu div：悬停{
颜色：#CBA；
文字装饰：无；
}
/*子菜单*/
#acdnmenu ul ul a，#acdnmenu.sub1{
颜色：#CBA；
填充：5px；左侧填充：24px；
文字装饰：无；
背景：无；
}

试试这个：

.topItem a{
    display: block;
    width: 100%;
    height: 100%
}

1） 您可以通过定义max height:number来执行此操作（以及动画）；和高度：在结束状态下自动，而不是使用js设置动画

像这样：

.sub{
    height:0;
    max-height:0;
    transition:all 0.3s ease; /* Just a catch all statement for animating them */
}

.sub.open {
    height:auto;
    max-height:250px;
}

如果子菜单高度相差很大，最好为它们定义不同的最大高度，因为如果子菜单太短，动画将发生得太快

---

如果您不支持IE8及以下版本，您甚至可以进一步简化它，并删除触发它们的js，方法是将复选框隐藏在其中，将.topItem替换为标签，并将其for属性设置为隐藏的复选框。然后可以使用：checked伪类侦听事件，如下所示：

 .sub-menu {
    height:0;
    max-height:0;
    transition:all 0.3s ease; /* Just a catch all statement for animating them */
}

input[type="checkbox"]:checked + .sub-menu{
    height:auto;
    max-height:250px;
}

我会做的另一件事是删除箭头的html，改为使用：before&:after

---

2） 不同之处在于，子菜单项具有display:block，填充直接提供给它们，而不是它的容器

设置此选项，它将工作：

#acdnmenu div.topItem a {
    display: block;
    margin: -8px -8px -8px -24px;
    padding: 8px 8px 8px 24px;
}

---

谢谢你，成功了。我想我已经试过了，buy一定做得不正确。我把你引用的.sub菜单作为目标，如下所示，但它对我不起作用

AAA-扩展的

• Google