CSS Forum

**aigb_mcd** · 05-05-2009, 12:08 PM

My menu will not go on top of the text/div below it. Any ideas? I'm trying my foot in CSS design.

Code:

 
<style type="text/css">
<!--
ul {
 padding: 0px;
 list-style-type: none;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 z-index: auto;
 clear: both;
}
ul li {
 float: left;
 width: 125px;
 position: relative;
 display: block;
 page-break-before: auto;
 page-break-after: auto;
 border-top-color: #FFF;
 border-right-color: #FFF;
 border-bottom-color: #FFF;
 border-left-color: #FFF;
}
li ul {
 padding-top: 0px;
 display: none;
 clear: left;
}
ul li a {
 display: block;
 color: #FFF;
 text-decoration: none;
 padding-left: 15px;
 background-color: #999;
 font-family: arial;
 font-size: 12px;
 font-weight: bold;
}
ul li a:hover {
 background-color: #000;
}
li:hover ul, li.over ul {
 display: block;
}
#nav {
 height: 26px;
 width: 506px;
 margin-top: 0px;
 margin-right: auto;
 margin-left: auto;
}
#text {
 width: 506px;
 margin-right: auto;
 margin-left: auto;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
  <li><a href="#">About Us</a>
<ul>
      <li><a href="#">True Results</a></li>
      <li><a href="#">Our Program</a></li>
    </ul>
  </li>
  <li><a href="#">Locations</a>
<ul>
      <li><a href="#">Austin</a></li>
      <li><a href="#">Dallas</a></li>
      <li><a href="#">Houston</a></li>
      <li><a href="#">Phoenix</a></li>
      <li><a href="#">Fort Worth</a></li>
    </ul>
  </li>
  <li><a href="#">Learning Center</a>
<ul>
      <li><a href="#">Lap-Band Surgery</a></li>
      <li><a href="#">After Banding</a></li>
    </ul>
  </li>
  <li><a href="#">FAQ's</a>
<ul>
      <li><a href="#">General</a></li>
      <li><a href="#">Ask an expert</a></li>
    </ul>
  </li>
</ul>
</div>
<div id="text">fasfsafsfsaf</div>

**aigb_mcd** · 05-05-2009, 03:17 PM

Get rid of that z-index: auto - it's useless for what you want and give it a REAL z-index value. Give it something like z-index: 20; (not some low number).

Thanks LadynRed