CODEWITHSUNDEEP
htmlcsshtml-lists
Joe Elmore
Joe Elmore

Reputation: 117

centering a dropdown menu vertically

I almost got this drop down menu knocked out. I'm having a problem centering it vertically. I tried to add padding and margin but one puts a weird line through my drop down areas and one puts extra spacing between my drop downs.

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 */

Site at http://www.joekellywebdesign.com/churchsample1/index.html
Css at http://www.joekellywebdesign.com/churchsample1/css/styles.css

Upvotes: 0

Views: 198

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240968

You can add margin-top:10px; to the li.

Updated CSS

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

You can also combine both margins.. margin: 10px 4px 0px 0px;

Additionally, adding inline-block and removing float:left will give you this result:

enter image description here

Upvotes: 2

George
George

Reputation: 2493

Code is really, really broke on top but this should help you out a bit.

Centering things vertically is a weird task to handle in CSS and I can't really explain why you need to do this but its how I've always done it.

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

Upvotes: 0

Related Questions