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

Question

我创建了一个css top下拉导航栏，但尚未完成。我一直试图解决两个问题。第一个问题是我的导航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内。 这是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

请在此处查看您的解决方案

nav {

显示：块;    位置：相对;    border：1px solid＃002799;    背景：线性渐变（到底部，＃4970E3 0％，＃121B3E 100％）重复滚动0％0％透明;    background：-moz-linear-gradient（到底部，＃4970E3 0％，＃121B3E 100％）重复滚动0％0％透明;    background：-webkit-linear-gradient（到底部，＃4970E3 0％，＃121B3E 100％）重复滚动0％0％透明;    填充：0px 0px 0px 0px;    border-radius：15px;    身高：40px;    宽度：470px;    保证金：0px auto;    字体：Bold 16px Verdana;    }

nav ul {

保证金：0px;    填充：0px;   }

nav ul li {

list-style：none;    向左飘浮;    位置：相对;   }

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 可以找到Here

一旦你发现它可以用代码更新我的答案：）