我的CSS下拉导航栏有2个问题

Question

我创建了一个CSS顶部下拉导航栏，但尚未完成。 我一直试图解决两个问题。 第一个问题是我的导航div太高或我的1px右边框标签分隔符没有达到底部。 我的第二个问题是我的下拉菜单没有显示。 我的导航位于该网站http://osweb01.ostech.com.au/上 。

这是html：

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

导航位于div内，该div也会向右浮动。 这是CSS。 我还没有完成任务，因为我想首先解决这些问题：

#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;
   }

有人可以帮忙吗？ 我被困住了，不知道该怎么办。

Answer 1

请在这里查看您的解决方案

导航{

显示：块； 位置：相对； 边框：1px实线＃002799； 背景：线性渐变（到底部，＃4970E3 0％，＃121B3E 100％）重复滚动0％0％透明； 背景：-moz-linear-gradient（到底部，＃4970E3 0％，＃121B3E 100％）重复滚动0％0％透明； 背景：-webkit-linear-gradient（到底部，＃4970E3 0％，＃121B3E 100％）重复滚动0％0％透明； 填充：0px 0px 0px 0px; border-radius：15px; 高度：40px； 宽度：470px； 边距：0px自动; 字体：粗体16px Verdana； }

导航ul {

边距：0px; 填充：0px; }

nav ul li {

列表样式：无； 向左飘浮; 职位：相对 }

nav ul li：last-child a {

border:none;

}

nav ul li a {

text-decoration: none;
display: block;
border-right: 1px solid #121B3E;
padding: 10px 15px;

}

nav ul ul {

display: none;  
position:absolute;
left:0px;
white-space:nowrap;

}

nav ul li：hover ul {

display:block;

}

nav ul ul li {

border: 1p solid #121B3E;
width:100%;
float:none;
white-space:nowrap;

}

nav ul ul li a {

border-right: none;
font: Bold 16px Verdana;

}

http://jsfiddle.net/nponnen/mM9Z5/

Answer 2

请检查此LabDemo

要显示子菜单，您需要在CSS下方添加

#nav ul li:hover ul  {
    display:block; 
    width:100%;
    white-space:nowrap
}

CSS和HTML可以在这里找到

一旦找到OK，我将用代码更新我的答案：）