navigation dropdown menu extend beyond the nav height

Question

i have this exemple dropdown exemple

my problem is that i want to extend the ability to hover on all the sub items without increasing the nav height now i can only hover over servic1 if i increase the height i can control more sub items

 HTML:
 <ul id="nav">
            <div class="wrap">
                <a id="Faccebook" href="#" > <img src="../zeela/img/Facebook.png" /></a>

                <li>
                    <a      href="#">home</a>
                </li>
                <li>
                    <a href="#">about</a>
                </li>
                <li>
                    <a href="#" >srvices</a>
                    <ul id = "sub_menu">
                        <li>
                            <a href="#" >servic1</a>
                        </li>
                        <li>
                            <a href="#" >servic2</a>
                        </li>
                        <li>
                            <a href="#" >servic3</a>
                        </li>
                        <li>
                            <a href="#" >servic4</a>
                        </li>
                        <li>
                            <a href="#" >servic5</a>
                        </li>

                    </ul>
                </li>
            </div>
  </ul>
   <div class="wrap">
        <div id="MainTitle" >
            main titel text
        </div>
    </div>

​ css

ul#nav img {
position:relative;top:0;bottom:0;margin:auto;
vertical-align: top;
padding-right: 20px;
}

#home {
font-size: 14px;
text-align: right;
}

ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height:45px;
background-color: #e2e2e2; 
-moz-box-shadow: 1px 6px 1px #888;    
-webkit-box-shadow: 1px 6px 1px #888; 
box-shadow: 1px 6px 1px #888;

 }

ul#nav li {
float: left;
}

ul#nav li a {
text-decoration: none;
display: block;
text-align:center;
padding-left: 10px;
padding-top: 10px;
font-family: Tahoma;
font-size: 16px;
color: #666666;
font-weight: bold;
 z-index:9999;
}
ul#nav li a:hover {
font-family: Tahoma;
font-size: 14px;
color: #000000;
font-weight: bold;
}
ul#nav li a:focus {
font-family: Tahoma;
font-size: 14px;
color: #000000;
font-weight: bold;
}
ul#nav li ul {
position: absolute;
display: none;
 }
     ul#nav li ul li {
list-style-type: none;
float: none;
   }


#MainTitle {
padding-bottom: 50px;
padding-top: 50px;
padding-right: 30px;
font-family: Tahoma;
font-size: 35px;
color: #535353;
z-index: 9;
}

.wrap {

    position:relative;
    margin:0 auto;
          /*replace 900px with your width*/
    width:960px;


 }

jquery

 $("#nav").hover(function() {
        $("#sub_menu").show();
      }, function() {
        $("#sub_menu").hide();
       });​

​

Answer 1

Replace your jQuery function with this one:

$("#nav").on('mouseover',function() {
    $("#sub_menu").show();
});
$("#sub_menu").on('mouseout',function() {
    $(this).hide();
});​

And add an higher z-index to your submenu:

ul#nav li ul {
    position: absolute;
    display: none;
    z-index:10; /* add this line */
}

It should work now, demo

---

For a better result, add an id to the "srvices" li:

<li id="subMenuSrvicesContainer">
<a href="#" >srvices</a>
/* ...etc... */

And replace the function above with this one:

$("#subMenuSrvicesContainer").on('mouseover',function() {
    $("#sub_menu").show();
});
$("#sub_menu").on('mouseout',function() {
    $(this).hide();
});​

Demo