title: CSS accordion menu - How to expand and hyperlink <div>
body: <p>I've taken a complex Accordion Menu design, and reduced the HTML and CSS to as basic and clean as possible. </p>
  
  <p><a href="http://soflorealty.com/menu/menu.html" rel="nofollow">http://soflorealty.com/menu/menu.html</a></p>
  
  <p>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. <strong>Is there a way to just specify which top level menu item I want expanded without having to determine the desired expanded height size?</strong></p>
  
  <p>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. <strong>However, with the other sub-menu links, the entire "li" tag is clickable.</strong>  I can't find the difference as to why this is not the case with "CCC". <strong>I'd like to make the whole DIV tag clickable.  Any ideas?</strong></p>
  
  <pre><code>&lt;div id="acdnmenu"&gt;
      &lt;ul class="top"&gt;
  
          &lt;li&gt;&lt;div class="topItem"&gt;&lt;div class="arrowImage"&gt;&lt;/div&gt;AAA - Expanded&lt;/div&gt;
              &lt;ul style="height: 75px;" c="1"&gt;
                  &lt;li&gt;&lt;a href="http://www.Google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.Yahoo.com"&gt;Yahoo&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.Bing.com"&gt;Bing&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;div class="topItem"&gt;&lt;div class="arrowImage"&gt;&lt;/div&gt;BBB - News&lt;/div&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://www.cnn.com"&gt;CNN&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.msnbc.com"&gt;MSNBC&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.foxnews.com"&gt;Fox News&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;div class="sub1"&gt;&lt;div class="arrowImage"&gt;&lt;/div&gt;More News&lt;/div&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="http://www.worldnews.com"&gt;World&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="http://www.finance.com"&gt;Finance&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="http://www.sports.com"&gt;Sports&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="http://www.health.com"&gt;Health&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;&lt;/li&gt;
                      &lt;/ul&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;div class="topItem"&gt;&lt;a href="http://www.soflorealty.com"&gt;CCC - No SubMenu&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  
  #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; 
  }
  </code></pre>