如何減少我的菜單標題和項目之間的空間？

我想減少菜單名稱（即菜單I）和相關菜單項（即傳記，出版物）之間的巨大空間。什麼是造成額外的空間，我該如何減少它？這裏是一個的jsfiddle鏈接：link 非常感謝如何減少我的菜單標題和項目之間的空間？

<body> 
<div id="header"></div> 
<div id="logo">My Name</div> 
<div id="mainmenu"> 
    <ul> 
    <li> 
     <h5>Menu I</h5> 
     <ul> 
     <li><a title="" href="">Biography</a></li> 
     <li><a title="" href="">Publications</a></li> 
     </ul> 
    <li> 
     <h5>Menu 2</h5> 
     <ul> 
     <li><a title="" href="">Demo</a></li> 
     <li><a title="" href="">Features</a></li> 
     <li><a title="" href="">Comparison</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
<div id="intro-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</div> 
</body>

CSS：

@charset "UTF-8"; 
/* CSS Document */ 

#header { 
    width: 100%; 
    height: 76px; 
    background-color: #005EBC; 
} 

#logo { 
    position: absolute; 
    left: 20px; 
    top: 35px; 
    color: white; 
    font-size: 20px; 
} 

#intro-text { 
    width: 300px; 
    position: absolute; 
    top: 90px; 
    left: 20px; 
    font-size:12px; 
} 

/* mainmenu */ 

H5 { 
text-transform: uppercase; 
} 

#mainmenu { 
    width: 100%; 
    min-height: 140px; 
    padding-bottom: 20px; 
    margin-top: -40px; 
    *padding-top: -40px; 
    overflow: hidden; 
} 

#mainmenu ul { 
    list-style: none; 
    margin: 0; 
    float: right; 
    color: #C3C; 
} 

#mainmenu ul li { 
    display: inline-block; 
    float: left; 
    width: 140px; 
    line-height: 20px; 
} 

#mainmenu>ul>li { margin-left: 20px } 

#mainmenu ul li a { 
    font-size: 12px; 
    display: block; 
} 

#mainmenu ul li a, 
#mainmenu ul ul:hover li a { color: green } 


#mainmenu ul ul li a:hover, 
#mainmenu ul ul li.current-menu-item a { color: red }

來源

2013-03-10 Greg