CSS accordion menu - How to expand and hyperlink <div>

Question

I've taken a complex Accordion Menu design, and reduced the HTML and CSS to as basic and clean as possible.

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

1) The "AAA - Expanded" menu link is expanded with a specified "height: 75px". Which means I would have to calculate the total height of the combined sub-menu "li" list-items for each top level menu item. Is there a way to just specify which top level menu item I want expanded without having to determine the desired expanded height size?

2) The "CCC - No SubMenu" menu item links to an external page (not to expand the sub-menu) and so it only clickable on the TEXT itself. However, with the other sub-menu links, the entire "li" tag is clickable. I can't find the difference as to why this is not the case with "CCC". I'd like to make the whole DIV tag clickable. Any ideas?

<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

try this:

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

Answer 2

1) You can do this(and the animations) by defining max-height: number; and height:auto at the end state instead of animating it with js.

Like this:

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

If sub-menu heights differ a lot, it'd be better to define different max-heights for them as the animation will happen too quickly if the sub-menu is too short.

---

If you can afford to not support IE8 and below, you can even simplify it further and remove the js for triggering them by hiding checkboxes in there and replacing .topItem with labels and set their for attributes to the hidden checkboxes. Than you can listen to the event with the :checked pseudo-class like so:

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

Another thing I would have done would be to remove the html for the arrows and use :before & :after instead.

---

2) The difference is that sub-menu items have display:block and the padding is given to them directly, not to it's container.

Set this and it will work:

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