Question

Okay, I really need some help with this. I’m new with designing and stuff, but I’m a good learner.Anyway, I’m trying to build this website, and I need to create a menu in like the middle of the page. Its like, there is a logo, and when you roll over it, the menu slides above it insteadof going below like regular menus. The script is doing fine, I’m using jQuery and all, the menu goes up when you roll over, but the problem is, that when the menu slides up, the logo goes down. Like, I want the logo to stay fixed, and only the menu go up. I don’t know what I am doing wrong, but this is giving me a headache… Yeah I know, I’m a newb, but I just started learning about this stuffs…

Here is the Script:

    <script type="text/javascript">
      $(document).ready(function(){

$(".btn-slide").mouseenter(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});
      </script>

Here is the CSS:

      #panel {
background: #fff;
height: 150px;
display: none;
      }
      .slide {
margin: 0;
padding: 0;
background: url(img/menu/main.jpg) no-repeat center top;
      }
      .btn-slide {
background: url(img/menu/main.jpg) no-repeat right;
text-align: center;
width: 150px;
height: 58px;
padding: 0px 0px 0 0;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
      }
      .active {
      background-image:url(img/menu/main.jpg);
      }

I wont be posting the html because you guys can see the source on the site.

PS. I used a DIV inside a Table cell… if someone can please help me out….

This is the menu:

http://www.avuzedesigns.com/estiloearte/

Answer 1

#panel {
    background: none repeat scroll 0 0 #FFFFFF;
    display: none;
    height: 150px;

    margin-top: -150px; 
    position: relative; 
}