# Drop Down menu blues

**URL:** <https://forum.kirupa.com/t/drop-down-menu-blues/328631>\
**Category:** web dev\
**Created:** [May 31, 2012, 8:37pm UTC](https://forum.kirupa.com/t/drop-down-menu-blues/328631 "2012-05-31T20:37:10Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ksuguy25](https://avatars.discourse-cdn.com/v4/letter/k/fbc32d/32.png) [@Ksuguy25](https://forum.kirupa.com/u/Ksuguy25)\
**Post date:** [May 31, 2012, 8:37pm UTC](https://forum.kirupa.com/t/drop-down-menu-blues/328631/1 "2012-05-31T20:37:10Z")

</div>

Hello, I’ve created a drop down menu for a website that i’m creating for someone.

[http://www.rodriguezstudios.com/division9/](http://www.rodriguezstudios.com/division9/)

Whenever I hover the menu, the drop down box goes under the picture. I want it to be over the top of the picture. Here is my nav html and css code.

```auto

<div id="navigation">
<div class="nav">
<ul>
<li>
<a href="index.html">Home</a>
</li>

<li>
<a href="aboutus.html">About Us</a>
</li>

<li>
<a href="products.html">Products</a>
<ul>
<li><a href="carpet.html">Carpet</a></li>
<li><a href="ceramic.html">Ceramic + Stone Tile</a></li>
<li><a href="resilient.html">Resilient</a></li>
<li><a href="hardwood.html">Hardwood</a></li>
<li><a href="laminate.html">Laminate</a></li>
<li><a href="matting.html">Matting + </a></li>
<li><a href="accessories.html">Accessories</a></li>
</ul><!--product sub menu-->
</li>

<li>
<a href="services.html">Services</a>
<ul>
<li><a href="design.html">Design Support</a></li>
<li><a href="estimating.html">Estimating</a></li>
<li><a href="project.html">Resilient</a></li>
<li><a href="hardwood.html">Project Management</a></li>
<li><a href="installation.html">Installation</a></li>
<li><a href="refresh.html">Refresh</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
</ul><!--product sub menu-->
</li>

<li>
<a href="install.html">Install</a>
<ul>
<li><a href="corporate.html">Corporate</a></li>
<li><a href="retail.html">Retail</a></li>
<li><a href="project.html">Resilient</a></li>
</ul><!--product sub menu-->
</li>
</ul>
</div>
</div>
<!--end of navigation-->

```

```auto

#navigation{
    position:absolute;
    width:510px;
    height:51px;
    margin: 100px 0px 0px 700px;
    
}

.nav ul {
    list-style:none; margin: 0; padding:0;    
}

.nav li {
    float:left; width:100px; background-color:#444444; text-align:center; position:relative; height:30px; line-height:30px;
}

.nav li ul li{
    float:none; width:150px; text-align:left; padding-left:5px;
}

.nav a {
    text-decoration:none; color:white;
}

.nav li ul {
    position:absolute; top:30px; left:0; visibility:hidden;
}

.nav li:hover{
    
    background-color:maroon;
}

.nav li:hover ul{ visibility:visible;}

.content { clear:both; }

```

Please help, thanks!