dropdown

[Tumbleweed]

[b]<style>
#shadowsrpg_wrap{
margin:auto;
}
.one {
position: relative;
width: 900px;
height: 100px;
margin: 10px;
background-image:url(http://i657.photobucket.com/albums/uu300/EliteList/Bkgrns/med/MRbkg1.gif);
background-repeat:repeat;

}
.two {
position: relative;
top:8px;
width:856px;
height:66px;
background: #ff0000;
padding:8px;
margin:10px;
display:none;
}
</style>
<div id="shadowsrpg_wrap">
<div class="one">
   <div class="two">This is where your content goes</div>
</div>
</div>



<script>
   /* Fade-in text over images */
   $(function() {
       $(".two").hide();
       $(".one").hover(function() {
           $('.two', this).fadeIn(500);
       }, function() {
           $('.two', this).fadeOut(500);
       });
   });
</script>

[/b]


<div style="clear:both;"></div>
<style>
#big_wrappity{
width:100%;
height:100px;
background-image: linear-gradient(bottom, #FFD51A 70%, #FAC815 30%);
background-image: -o-linear-gradient(bottom, #FFD51A 70%, #FAC815 30%);
background-image: -moz-linear-gradient(bottom, #FFD51A 70%, #FAC815 30%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 70%, #FAC815 30%);
background-image: -ms-linear-gradient(bottom, #FFD51A 70%, #FAC815 30%);
z-index:80;
}
.my_divBox{
width:100px;
height:60px;
position:relative;
float:left;
padding-top:10px;
padding-left:30px;
z-index:100;
}
.my_divBox a:hover{
background-color:#C67171;
border-radius:10px;
-moz-border-radius:10px;
padding:4px;
width:100px;

}

.my_item{
position:absolute;
width:600px;
height:30px;
background-color:#C67171;
top:40px;
left:40px;
padding:4px;
z-index:1000;

}
.my_item a:link{
font-size:14px;
margin-right:20px;


}
/*
.my_hov_cont{
width:100%;
height:30px;
background-color:#C67171;

}
*/
</style>



<div id="big_wrappity">

<div class="my_divBox">

<a href="mylink.com">Link One</a>

<div class="my_item" style="z-index:1003;">
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
</div>





</div>

<div class="my_divBox">

<a href="http://mylink.com">Link Two</a>
<div class="my_item">
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>


 
</div>
</div>

<div class="my_divBox">
<a href="http://mylink.com">Link Two</a>
<div class="my_item"style="z-index:1005;">


<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
<a href="http://linkone.com">Link One</a>
 
</div>
</div>

</div>

<script>
$('.my_item').hide();
$('.my_divBox').hover(function() {
   $(this).children('.my_item').show();    
}, function() {
   $(this).children('.my_item').hide();
});
</script>


<div style="clear:both;"></div>






<br /><br />