除非我改变导航高度，否则下拉不会显示

Question

所以我终于让我的下拉列表起作用了，除非我在这里改变导航高度它不会出现：

header nav {
width:100%;
height:auto;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
}

我一直在玩Z值，但我不是百分之百确定它是如何工作的，或者我是否错过了什么。如果我将导航高度更改为150px它可以正常工作，但是当下拉列表不存在时会有很大的差距。

HTML CODE：

  <header>
  <div class="main">
    <div class="wrapper">
      <h1><a href="index.html">KB Customs</a></h1>
      <div class="fright">
      <div class="indent"> <span class="address">Walker, MI 49544</span>      <span class="phone">Tel: 616-901-1174</span> </div>
      </div>
    </div>
    <nav>
      <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a  class="active"  href="about.html">About Us</a></li>
        <li><a href="maintenance.html">Products </a>
        <ul class="dropdown">
        <li>
        <a href="maintenance.html">Products </a>
        </li>
        </ul>
        </li>
        <li><a href="repair.html">Gallery</a></li>
        <li><a href="price.html">FAQ & Prices</a></li>
        <li><a href="locations.html">Contact Us</a></li>
      </ul>
      </nav>
    </div>
   </header>

CSS代码：

      /***** menu *****/

 header nav {
 width:100%;
 height:auto;
 background:url(../images/menu-bg.jpg) 0 0 no-repeat;
 overflow:hidden;
 position:relative;
z-index:1;
}

#page1 header nav {
margin-bottom:28px;
}

.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) left top no-repeat;
z-index: 2;
}

.menu > li:first-child {
background:none;
}

.menu li a {
display:inline-block;
font-size:18px;
line-height:25px;
padding:12px 28px 12px 29px;
color:#808080;
text-transform:capitalize;
}

.menu > li:first-child > a {
text-indent:-999em;
background:url(../images/menu-home.png) center -25px no-repeat;
min-width:22px;
}

.menu li a.active, .menu > li > a:hover {
color:#fff;
}

 .menu > li:first-child > a.active, .menu > li:first-child > a:hover {
background-position:center 15px;
}


 ul li ul.dropdown{
    min-width:inherit; /* Set width of the dropdown */
    background:url(../images/menu-bg.jpg) 0 0 no-repeat;
    display: none;
    position: absolute;
    z-index: 3;
    left: 0;
 }

ul li:hover ul.dropdown{
    display: block; /* Display the dropdown */
    color:#fff;
       z-index: 3;

 }

 ul li ul.dropdown li{
    display: block;
       z-index: 3;
 }

  ul li ul.dropdown:hover li a{
     color:#fff;
        z-index: 3;
 }