下拉菜单高度的CSS和jQuery问题

Question

所以我做了一些下拉菜单。下拉列表嵌套在li中。出于样式的原因，我需要在页面首次加载时将下拉高度设置为0px，并提供一些填充。我所有的下降都有不同的高度。当我把100％放入高度时，它也不起作用。

这里是一个链接：http://www.jasonfoumberg.com/test/writing.html

我如何得到下拉菜单的动画到应有的高度。每个下拉菜单都有不同数量的项目。

jQuery的

$(document).ready(function() { 
    var defHeight = $('ul:first', this).height(); 
    console.log(defHeight); 

    $("ul li").hover(

    function() { 

     $('ul:first', this).animate({ 
      height: "100%" 
     }); 
    }, function() { 
     $('ul:first', this).animate({ 
      height: "0px" 
     }); 
    }); 
});​ 

HTML

<div id="mainWrapperContent"> 
    <div id="writingMenu"> 
      <ul> 
      <li><a href="">critical reviews</a> 
       <ul> 
        <li><a href="">frieze</a></li> 
        <li><a href="">Modern Painters</a></li> 
        <li><a href="">photograph</a></li> 
        <li><a href="">sculpture</a></li> 
        <li><a href="">NewCity</a></li> 
       </ul>     
      </li> 
      <li><a href="">Exhibition Catalogs</a> 
       <ul> 
        <li><a href="">Catalog One</a></li> 
        <li><a href="">Catalog Two</a></li> 
        <li><a href="">Catalog Three</a></li> 
        <li><a href="">Catalog Four</a></li> 
        <li><a href="">Catalog Five</a></li> 
       </ul>     
      </li> 
      <li><a href="">BreakOut Artists</a> 
       <ul> 
        <li><a href="">2012</a></li> 
        <li><a href="">2011</a></li> 
        <li><a href="">2010</a></li> 
        <li><a href="">2009</a></li> 
        <li><a href="">2008</a></li> 
       </ul>     
      </li> 
      <li><a href="">Cover Stories</a> 
       <ul> 
        <li><a href="">Catalog One</a></li> 
        <li><a href="">Catalog Two</a></li> 
        <li><a href="">Catalog Three</a></li> 
        <li><a href="">Catalog Four</a></li> 
        <li><a href="">Catalog Five</a></li> 
        <li><a href="">Catalog One</a></li> 
        <li><a href="">Catalog Two</a></li> 
        <li><a href="">Catalog Three</a></li> 
        <li><a href="">Catalog Four</a></li> 
        <li><a href="">Catalog Five</a></li> 
       </ul>     
      </li> 
      </ul> 
    </div><!-- writing Menu -->  
</div><!-- mainWrapper Content -->​ 

CSS

#writingMenu a { 
    margin: 0px 0px 0px 0px; 
    padding: 12px 5px 5px 5px; 
    text-align: right; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    transition: all .3s ease; 
    background: #ffffff; 
    color: #B3B3B3; 
    min-width: 140px !important; 
    display: block; 
} 

#writingMenu a:hover { 
    color: #37342e; 
} 

#writingMenu ul li ul { 
    position: absolute; 
    width: 90%; 
    float: left; 
    overflow: hidden; 
    border-left: thin solid black; 
    border-bottom: thin solid black; 
    border-right: thin solid black; 
    margin-left: -5px; 
    padding-top: 5px; 
    background-image: url(images/speckled_backgrounddk.jpg); 
    display: block; 
    height: 0px; 
} 

#writingMenu ul li ul li { 
    background-image: none; 
    float: none; 
} 

#writingMenu ul li ul a { 
    margin: 0px; 
    padding: 0px; 
    text-align: left; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    transition: all .3s ease; 
    color: #B3B3B3; 
    background-color: transparent; 
    background-image: none; 
    text-transform: lowercase; 
    color: #999999; 
}​ 

Answer 1

 $(document).ready(function() { 
    var defHeight = $('ul:first',this).height(); 
     console.log(defHeight); 

     $("ul li").hover(
      function() { 

       $('ul:first',this).stop().animate({height : "toggle"}); 
      }, 
      function() { 
       $('ul:first',this).stop().animate({height : "toggle"}); 
      }); 
      }); 

还没有尝试，但这应该工作

Answer 2

I'vde做了CSS的只是基于DD菜单，如果你有兴趣...

HTML =>

<!-- by rocky --> 
<div id="wrapper"> 
    <div id='navMenu'> 

    <ul> 
    <li><a href="#">Menu1</a> 

    <ul> 

    <li><a href="#">Dropdown1</a></li> 
    <li><a href="#">Dropdown2</a></li> 
    <li id="submenu"><a href="#">Dropdown3</a> 
    <ul> 
     <li><a href="#">Submenu 1</a></li> 

     <li><a href="#">Submenu2</a></li> 
     <li><a href="#">Submenu3</a></li> 
     </ul> 
    </li> 

    </ul> <!-- End of Menu1--> 

    </li> <!-- Menu2 --> 

    <li><a href="#">Menu2</a> 
    <ul> 

    <li><a href="#">Dropdown2</a>  </li> 
    <li id="submenu"><a href="#">Dropdown2</a> 
     <ul> 
      <li><a href="#">Dropdown2</a></li> 
     </ul> 
     </li> 
    <li><a href="#">Dropdown2</a></li> 

    </ul> <!-- End Inner UL --> 

    </li> <!-- ABOUT --> 
    <li><a href="#">Menu3</a> 
    <ul> 

    <li><a href="#">Submenu3</a></li> 
    <li id="submenu"><a href="#">Submenu3</a> 
     <ul> 
    <li><a href="#">Submenu3</a></li> 
     </ul> 
     </li> 
    </ul> <!-- End Inner UL --> 

    </li> <!-- End main LI --> 
    </ul> <!-- End main UL --> 

    </div> <!-- End Nav --> 

    </div> <!-- End wrapper --> 

而CSS：

#navMenu { 
    margin: 0; 
    padding: 0; 
} 

#navMenu ul{ 
    margin: 0; 
    padding: 0; 
    line-height: 30px; 
} 

#navMenu li{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    position: relative; 
} 

#navMenu ul li a { 
    text-align: center; 
    text-decoration: none; 
    height: 30px; 
    width: 150px; 
    display: block; 
    color: #000; 
} 

#navMenu ul ul { 
    position: absolute; 
    visibility: hidden; 
    top: 30px; 
} 

#navMenu ul li:hover ul { 
    visibility: visible; 
} 

#navMenu ul li ul a:hover { 
    color: #999; 
} 

#navMenu ul ul li#submenu ul { 
    position: absolute; 
    visibility: hidden; 
    top: 30px; 
} 

#navMenu ul ul li#submenu:hover ul { 
    margin-top: -30px; 
    margin-left: 105px; 
    visibility: visible; 
} 

有一个演示这里： http://dbwebb.se/style/?id=152