I've been making a drop down menu using this method:
http://azadcreative.com/2012/01/bulletproof-css3-dropdown-navigation-menu/
It works exactly as I want it to, the only problem is that I can't get the menu items (excluding the logo, it's positioned correctly) to vertically align in the navigation bar. I've tried any number of methods, but none seem to work. I suspect another selector is interfering, but I can't tell which.
Here's what the result of my current code looks like:
http://i.stack.imgur.com/fqh6W.png
I'm trying to align the separators, as well.
My CSS
<style type="text/css">
@import url("inc/reset.css");
@import url("fonts/fonts.css");
body { background-color: #fff; }
nav {
width: 925px;
margin: 0 auto;
zoom: 1;
text-align: left;
border: 1px solid #000;
}
nav:before, nav:after { display: table; content: ""; zoom: 1; }
nav:after { clear: both; }
nav ul {
float: left;
zoom: 1;
width: auto;
z-index: 100;
position: relative;
}
nav ul:before, nav ul:after { display: table; content: ""; zoom: 1 }
nav ul:after { clear: both; }
nav ul li {
float: left;
padding: 0 0 10px 0;
position: relative;
outline: none;
padding: 0 1px 0 0;
}
nav ul li.span:before { content: ''; }
nav ul li + li:before { content: '|'; color: #a8c399; }
nav ul a {
padding: 15px;
float: right;
display: block;
zoom: 1;
font: .9em "jubilat-regular", "Franklin Gothic Book", "Times New Roman", serif;
text-transform: lowercase;
}
nav ul a:link, nav ul a:visited { color: #353536; text-decoration: none; outline: none; }
nav ul a:hover, nav ul a:active { color: #701271; text-decoration: none; outline: none; }
#menu li:hover > ul { display: block; }
#menu li:hover > a { color: #701271; }
nav li ul {
display: none;
margin: 0;
position: absolute;
top: 46px;
left: 15px;
width: 10em;
background: #fff;
border: 1px dashed #a8c399;
z-index: 1000;
zoom: 1;
}
nav li ul li + li:before { content: ''; }
nav li ul li:hover { background-color: #a8c399; }
nav li ul:before, nav li ul:after { display: table; content: ""; zoom: 1; }
nav li ul:after { clear: both; }
nav li ul a { float: none; }
nav li ul li { width: 10em; display: block; }
</style>
My HTML:
<nav>
<ul id="menu">
<li><a href="#">Why Miche</a></li>
<li><span style="color:#701271;"><a href="#">Join Us</a></span>
<ul>
<li><a href="#">Join My Team!</a></li>
<li><a href="#">Starter Kits</a></li>
</ul>
</li>
<li><a href="#">Host a Miche Party</a>
<ul>
<li><a href="#">Hostess Benefits</a></li>
<li><a href="#">Miche Party Ideas</a></li>
</ul>
</li>
<li class="span"><a href="#"><img src="images/logo.png" width="295" height="67" alt="Miche" /></a></li>
<li class="span"><span style="color:#701271;"><a href="#">Shop</a></span></li>
<li><a href="#">About Miche</a>
<ul>
<li><a href="#">Media</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Giving Back</a></li>
</ul>
</li>
<li><span style="color:#701271;"><a href="#">About Me</a></span></li>
</ul>
</nav>
