How to make a nice menu.

This, and the previous post are jQuery related, because I played a lot with front-end stuff. Hopefully, I'll find some time and I'll publish some of the other things I did some time ago. So, let's not waste time. I'll not go into details, I believe the code is more or less self-explanatory.

 First, the HTML structure:

<span id="main_menu_bar">
  <span id="menu_item_wrapper">
<span id="men_item" class="active"><a href="#">Main Item1</a></span>
<span id="men_item"><a href="#">Main Item2</a></span>
  </span>
</span>
<div id="submenus">
</div>

The CSS:

menu_item_wrapper{
position: absolute;
height: 24px;
width: 1200px;
margin-bottom: 30px;
margin-top: 30px;
padding-left: 100px;
background-color: transparent;
}

#men_item{
position: relative;
padding: 0px;
margin-bottom: 30px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
background-color: transparent;
font-size: 122%;
}
#submenus{
position: fixed;
float: left;
display: none;
z-index: 101;

width: 70px;
height: 50px;

margin-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;

border: none;
background-color: #F7BE81;
color: #000;

border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft:  5px;
-moz-border-radius-bottomright:  5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
#submenu_item a{
color: #000;
border: none;
margin-bottom: 10px;
}
#submenu_item:hover {
border-color: #000;
border-style: solid;
border-bottom: #000;
border-top:none;
border-left:none;
border-right:none;
border-width: 1px;
text-decoration: underline;
}

#submenu_item{
margin-bottom: 10px;
}

And, the jQuery code:

var submenu_visible = true;
$('#men_item.active').hover(function(){
  var p = $(this).position();
  $('#submenus').hide();
  $('#submenus').css('margin-left',p.left+10);
  $('#submenus').css('width',$(this).css('width'));
  $('#submenus').css('margin-top','55px');
  $('#submenus').html('<div id="submenu_item"><a href="http://localhost/">test</a></div><div id="submenu_item">
<a href="http://localhost/">test</a></div>');
                $('#submenus').show();
 });
        $('#submenus').mouseenter(function(){
                submenu_visible=true;
        });
        $('#submenus').mouseleave(function(){
                if(submenu_visible){
                    $(this).hide();
                    submenu_visible=false;
                }
        });
 $(document).click(function(){
  $('#submenus').hide();
  $('#submenus').html('');
 });

I hope I'l have time to share an example soon.