xKkaati33x
New Member
i have this exemple dropdown exemplemy 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 servic1if i increase the height i can control more sub items HTML: <ul id="nav"> <div class="wrap"> <a id="Faccebook" href="http://stackoverflow.com/questions/12759207/#" > <img src="http://stackoverflow.com/questions/zeela/img/Facebook.png" /></a> <li> <a href="http://stackoverflow.com/questions/12759207/#">home</a> </li> <li> <a href="http://stackoverflow.com/questions/12759207/#">about</a> </li> <li> <a href="http://stackoverflow.com/questions/12759207/#" >srvices</a> <ul id = "sub_menu"> <li> <a href="http://stackoverflow.com/questions/12759207/#" >servic1</a> </li> <li> <a href="http://stackoverflow.com/questions/12759207/#" >servic2</a> </li> <li> <a href="http://stackoverflow.com/questions/12759207/#" >servic3</a> </li> <li> <a href="http://stackoverflow.com/questions/12759207/#" >servic4</a> </li> <li> <a href="http://stackoverflow.com/questions/12759207/#" >servic5</a> </li> </ul> </li> </div> </ul> <div class="wrap"> <div id="MainTitle" > main titel text </div> </div>? cssul#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(); });??