0

我差点把这个下拉菜单敲掉了。我在垂直居中时遇到问题。我尝试添加填充和边距，但一个在我的下拉区域中放置了一条奇怪的线，另一个在我的下拉区域之间放置了额外的间距。

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

4

2 回答 2

2

您可以添加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将为您提供以下结果：

在此处输入图像描述

于 2013-09-30T02:33:09.117 回答
0

代码真的非常非常糟糕，但这应该会对你有所帮助。

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

#myDiv {
    top:50;
    margin-top:-150px;
}
于 2013-09-30T02:32:55.283 回答