垂直居中下拉菜单

Question

我几乎把这个下拉菜单打掉了。我有一个垂直居中的问题。我试图添加填充和边距，但是一个在我的下拉区域放置了一条奇怪的线条，一个在我的下拉区域之间放置了额外的间距。

HTML

<div id="navmenudiv">
   <ul id="navmenu">
      <li><a href="index.html">Home</a></li>
      <li>
         <a href="about.html">About Us</a>
         <ul class="sub1">
            <li><a href="introduction.html">Introduction</a></li>
            <li><a href="whoweare.html">Who We Are</a></li>
            <li><a href="staff.html">Staff</a></li>
         </ul>
      </li>
      <li>
         <a href="services.html">Services</a>
         <ul class="sub1">
            <li><a href="sundaymorning.html">Sunday Morning</a></li>
            <li><a href="sundayevening.html">Sunday Evening</a></li>
            <li><a href="wednesday.html">Wednesday Evening</a></li>
         </ul>
      </li>
      <li><a href="resources.html">Resources</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="news.html">News and Events</a></li>
   </ul>
</div>

CSS

#navmenudiv {
    z-index:60; 
    margin: -30px 0; 
    height:50px; 
    background-color:#5340BF;
    top:40;
    position: relative; 
    text-align:center;
}

/* rules for nav menu */
ul#navmenu, ul.sub1, ul.sub2 {
    list-style-type:none;
}
ul#navmenu li {
    width:125px; 
    text-align:center; 
    position:relative; 
    margin-right:4px; 
    margin-top:10px; 
    display: inline-block;
}
ul#navmenu a {
    text-decoration:none; 
    display:block; 
    width:125px; 
    height 25px; 
    line-height:25px; 
    background-color:#FFF; 
    border: 1px solid #CCC; 
    border-radius: 5px;
}
ul#navmenu .sub1 li { 
    border: 1px solid green;
}
ul#navmenu .sub1 a { 
    margin-top: 3px;
}
ul#navmenu li:hover > a {
    background-color:#CFC;
}
ul#navmenu li:hover a:hover {
    background-color:#FF0;
}
ul#navmenu ul.sub1 { 
    display:none; 
    position:absolute; 
    top: 26px; 
    left: 0px;
}
ul#navmenu li:hover .sub1 {
    display:block;
}
/* end rules for nav menu */

网站http://www.joekellywebdesign.com/churchsample1/index.html
Css在http://www.joekellywebdesign.com/churchsample1/css/styles.css

Answer 1

您可以将margin-top:10px;添加到li。

更新了CSS

ul#navmenu li {
    width: 125px;
    text-align: center;
    position: relative;
    float: left;
    margin-right: 4px;
}
ul#navmenu > li { 
    margin-top: 10px; 
}

您还可以合并margins .. margin: 10px 4px 0px 0px;

此外，添加inline-block和删除float:left会得到以下结果：

Answer 2

代码真的，真的打破了，但这应该会帮助你。

垂直居中是一个奇怪的任务，需要在CSS中处理，我无法解释为什么你需要这样做但是我一直都是这样做的。

#myDiv {
    top:50;
    margin-top:-150px;
}