First the Code: <html> <head> <title>Drop Down Nav Bar Horizontal</title> <style type="text/css"> #sddm { margin: 0; padding: 0; z-index: 30; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial; } #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background: #597082; color: #fff; text-align: center; text-decoration: none; } #sddm li a:hover { background: #49a3ff; } #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #eaebd8; border: 1px solid #5970b2; } #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial} #sddm div a:hover { background: #49A3FF; color: #FFF} </style> <script> var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function mopen(id) { mcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = "hidden"; ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = "visible"; } function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = "hidden"; } function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); } } document.onClick = mclose; </script> </head> <body> <ul id="sddm"> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">HTML Drop Down</a> <a href="#">DHTML Menu</a> <a href="#">Javascript Drop Down</a> <a href="#">cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX Drop Submenu</a> <a href="#">DIV Cascading Menu</a> </div> </li> <li><a href="#">Order</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact</a></li> </ul> <div style="clear:both"></div> </body> </html> My first question is that the list is appearing "inline" what changes would I have to do so that the list appears in vertical form i.e display: block; I have done the display: block; and its not working. My second question is that in javascript section, I have declared ddmenuitem = 0; when initiating an "if" statement where I declare that if(ddmenuitem) it means that if(0). However if I actually type if(0), the output is different from if(ddmenuitem). (Actually the drop down menu item does not close when mouse out). Can someone tell me the reason behind it? My third question is related to the function mopen(id). Inside it, another function is being instantiated with the name of mcancelclosetime() however this function is defined later. So what's the point of introducing this function (which is yet to be defined) at the beginning of the code. I mean that does the series matter in javascript like in c++. Thanks.
Hello, I have fixed the code and clean it up abit, I have added a jQuery function to achieve the same effect I believe you are after. Also you should try to have the styles in an external css file it makes it alot cleaner to read. If you need me to explain how anything works or how to use jQuery more please, or if you needed it to do something else feel free to ask. Adam <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drop Down Nav Bar Horizontal</title> <style type="text/css"> /* Default Layout Styles */ ul,li,ol,h1,h2,h3,h4,h5,h6,pre,form,html,p,body,blockquote,fieldset,input {margin:0;padding:0} h1,h2,h3,h4,h5,h6,pre,code{font-size:1em} body { font-family:Arial,Helvetica,sans-serif; font-size:62.5%; text-align:left; } #sddm li { list-style: none; font-size: 1.1em; width: 90px; } #sddm li a { text-align: center; display: block; width: 90px; padding: 4px 10px; background: #597082; color: #fff; text-decoration: none; } #sddm li a:hover { background: #49a3ff; } #sddm div { width: 108px; display: block; background: #eaebd8; border: 1px solid #5970b2; } #sddm div a { width: 98px; padding: 5px 5px; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font-size: 1.1em; } #sddm div a:hover { background: #49A3FF; color: #FFF; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sddm li > a + div").hide(); $("#sddm li").each(function(){ $(this).hover( function () { $(this).children("div").show(); }, function () { $(this).children("div").hide(); } ); }); }); </script> </head> <body> <ul id="sddm"> <li> <a href="#">Home</a> <div> <a href="#">HTML Drop Down</a> <a href="#">DHTML Menu</a> <a href="#">Javascript Drop Down</a> <a href="#">cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </li> <li> <a href="#">Download</a> <div> <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX Drop Submenu</a> <a href="#">DIV Cascading Menu</a> </div> </li> <li> <a href="#">Order</a> </li> <li> <a href="#">Help</a> </li> <li> <a href="#">Contact</a> </li> </ul> </body> </html>
Yeah thanks. But there's one problem. The menu bar isn't horizontal. It's vertical. The first <li> elements are appearing below the other. So any suggestions? By the way, both fire fox and mozilla are showing the same result. I wanted the result like this: Home Download Order Help.... However the actual result is as : Home Download Order Help
Just put float left in the li css #sddm li { float: left; list-style: none; font-size: 1.1em; width: 90px; }
Yeah it worked. Thanks. Now the question about the JQuery code. In a syntax "#sddm li > a + div", what do these signs/operator has to do like ">" and "+"? I mean, wouldn't the code "#sddm li a div" do the same trick?