I've been working on a CSS top dropdown navigation bar, but I'm encountering two issues that I can't seem to resolve. The first problem is that my nav div either extends too far down or my 1px right border tabs aren't reaching the bottom properly. The second issue is that my dropdowns are not appearing as they should. You can view the navigation in action on this site: .
Below is the HTML code:
<div id="nav">
<ul>
<li><a href="<?php echo get_option('home'); ?>/">Home</a>
</li>
<li><a href="<?php echo get_option('about us'); ?>/">About Us</a>
<ul>
<li><a href="<?php echo get_option('home'); ?>/">Why OSTech</a></li>
<li><a href="<?php echo get_option('home'); ?>/">Testimonials</a></li>
<li><a href="<?php echo get_option('home'); ?>/">Case Study 1</a></li>
<li><a href="<?php echo get_option('home'); ?>/">Case Study 2</a></li>
<li><a href="<?php echo get_option('home'); ?>/">Green IT</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSdesk Intel vPro Technology</a></li>
<li><a href="<?php echo get_option('home'); ?>/">Workstation Innovation</a></li>
<li><a href="<?php echo get_option('home'); ?>/">Consolidation and Centralisation</a></li>
<li><a href="<?php echo get_option('home'); ?>/">The Green Grid</a></li>
<li><a href="<?php echo get_option('home'); ?>/">Clean Technologies</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSdesk Remote Management</a></li>
</ul>
</li>
<li><a href="<?php echo get_option('what we do'); ?>/">What We Do</a>
<ul>
<li><a href="<?php echo get_option('home'); ?>/">OSdesk</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSguard</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSmon</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSvault & OSclass</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSmail & OShost</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OStrack & OSdms</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSarchive & OSgroup</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSfaq & OShelp</a></li>
<li><a href="<?php echo get_option('home'); ?>/">OSbill & OScal</a></li>
</ul>
</li>
<li><a href="<?php echo get_option('contact us'); ?>/">Contact Us</a><ul>
</li>
</ul>
</div>
The nav is placed within a floated right div as well. Here is the CSS code. I haven't added the hover effects yet because I want to fix these issues first:
#nav {
display: block;
position:relative;
border: 1px solid #002799;
background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
padding: 0px 0px 0px 0px;
border-radius: 15px;
height: 75px;
width: 470px;
margin: 0px auto;
font: Bold 16px Verdana;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul:after {
content:*.*;
display:block;
height: 0px;
clear:both;
visibility: hidden;
}
#nav li {
list-style: none;
float: left;
position: relative;
}
#nav li a {
text-decoration: none;
display: block;
border-right: 1px solid #121B3E;
padding: 10px 25px;
}
#nav ul ul {
display: none;
position:absolute;
left:0px;
width:0px;
}
#nav ul ul li {
border: 1p solid #121B3E;
width:100%;
}
#nav ul ul li a {
border-right: none;
font: Bold 16px Verdana;
}
I would greatly appreciate any help or advice on how to solve these problems. Thank you!