I am currently in the process of enhancing my website with drop-down menus, specifically from the gray buttons located at the top of the page. Using HTML and CSS lists (code provided below), I have successfully implemented the functionality. However, I am facing a challenge in vertically aligning the text within the drop-downs.
The current alignment works well for list items that span two lines, but single-line elements tend to align at the top.
I've experimented with inserting divs and applying vertical-align: middle to the CSS, but haven't observed any visible changes.
HTML:
<nav id="main-nav">
<ul id="nav-primary">
...
</nav>
CSS:
#main-nav {
background: none repeat scroll 0 0 white;
height: 53px;
left: -3px;
position: relative;
top: 128px;
width: 100%;
}
...