CSS аккордеонное меню - Как развернуть и гиперссылку <div>

Question

Я взял сложный дизайн Аккордеонного Меню и сократил HTML и CSS до максимально простого и понятного.

http://soflorealty.com/menu/menu.html

1) Ссылка меню "AAA - Expanded" расширяется указанным значением "height: 75px". Это означает, что я должен был бы вычислить общую высоту комбинированных элементов списка подменю "li" для каждого пункта меню верхнего уровня. Есть ли способ просто указать, какой элемент меню верхнего уровня я хочу расширить, не определяя желаемый размер расширенной высоты?

2) Элемент меню "CCC - No SubMenu" ссылается на внешнюю страницу (не для расширения подменю), поэтому он активируется только в самом ТЕКСТЕ. Однако, с другими ссылками подменю, весь тег "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; 
}

Answer 1

Попробуй это:

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

Answer 2

1) Вы можете сделать это (и анимацию), определив max-height: number; и height: auto в конечном состоянии вместо анимации с помощью 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 метками и установив их атрибуты для скрытых флажков. Затем вы можете прослушать событие с помощью псевдокласса: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;
}