473,509 Members | 3,543 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

problem in dynamic vertical drop down menu list

34 New Member
i have designed a menu list program in which i'm facing a problem where the last li item (white crappie) shifts down when i hover mouse pointer to just above li item (ozrack bazz) of white crappie instead (white crappie) li item should be to be sticked just below (ozrack bazz) li item without a down shift.

i request u all to kindly sort the problem.

i have send menu_css.html file along with the layout.css file.

thanks

html file:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="JavaScript" type="text/javascript">
  4.  
  5. window.onload = activateMenu;
  6.  
  7.  
  8. function activateMenu() {
  9. /* currentStyle restricts the Javascript to IE only */
  10.  
  11. var navroot = document.getElementById("nav");
  12.  
  13. /* Get all the list items within the menu */
  14.  
  15. var lis=navroot.getElementsByTagName("LI");
  16. //alert(lis.item(0).lastChild.tagName);
  17. for (i=0; i<lis.length; i++) {
  18.  
  19.  
  20. /* If the LI has another menu level */
  21. if(lis.item(i).lastChild.tagName=="UL"){
  22.  
  23. /* assign the function to the LI */
  24. lis.item(i).onmouseover=function() {
  25.  
  26. /* display the inner menu */
  27. this.lastChild.style.display="block";
  28. }
  29. lis.item(i).onmouseout=function() {
  30. this.lastChild.style.display="none";
  31. }
  32. }
  33. }
  34.  
  35. }
  36.  
  37.  
  38. </script>
  39. <link href="layout.css" rel="stylesheet" type="text/css" />
  40.  
  41. </head>
  42. <body>
  43. <p>this is test menu</p>
  44. <br />
  45. <ul id="nav">
  46. <li >Sunfishes
  47. <ul >
  48. <li><a href="">Blackbanded»sunfish</a></li>
  49. <li><a href="">Shadow bass</a></li>
  50. <li><a href="">Ozark bass</a>
  51. <ul class="pg">
  52. <li class="ed">a</li>
  53. <li class="er">b
  54. <ul>
  55. <li class="aq">m</li>
  56. <li class="wa">n</li>
  57. </ul>
  58. </li>
  59. <li class="eq">c</li>
  60. </ul>
  61. </li>
  62. <li class="sd"><a href="">White crappie</a></li>
  63. </ul>
  64. </li>
  65.  
  66. <li >Grunts
  67. <ul >
  68. <li><a href="">Smallmouth grunt
  69. </a></li>
  70. <li><a href="">Burrito</a></li>
  71. <li><a href="">Pigfish</a></li>
  72. </ul>
  73. </li>
  74.  
  75. <li >Remoras
  76. <ul >
  77. <li><a href="">Whalesucker</a></li>
  78. <li><a href="">Marlinsucker</a></li>
  79. <li><a href="">Ceylonese remora</a></li>
  80. <li><a href="">Spearfish remora</a></li>
  81. <li><a href="">Slender suckerfish</a></li>
  82. </ul>
  83. </li>
  84. </ul>
  85.  
  86. </body>
  87.  
  88. </html>
  89.  
css file:

Expand|Select|Wrap|Line Numbers
  1. ul {
  2. padding:0;
  3. margin:0;
  4. list-style: none;
  5. }
  6. a {text-decoration:none;}
  7.  
  8. li {
  9. float: left;
  10. position: relative;
  11. width: 180px;
  12.  
  13. }
  14.  
  15. /*li ul {
  16. display: none;
  17. position: absolute;
  18. top: 1em;
  19. left: 0;
  20. }*/
  21. #nav ul, #nav ul ul, #nav ul ul ul{
  22. display:none;
  23. position:absolute;
  24. top: 1em;
  25. left: 0;
  26. }
  27. /*#nav {
  28. display: none;
  29. position: absolute;
  30. top: 1em;
  31. left: 0;
  32.  
  33. }*/
  34.  
  35. li > ul {
  36. top: auto;
  37. left: auto;
  38. }
  39. /*#nav li:hover ul { display:block; } */
  40.  
  41. #nav li:hover ul ul, #nav li:hover ul ul ul{ display:none; }
  42.  
  43. /*#nav ul li:hover ul {
  44. display: block;
  45.  
  46. }*/
  47. #nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
  48. display:block;
  49. top: auto;
  50. left: auto;
  51. position:relative;
  52. }
  53. .pg {padding-left:140px;}
  54. /*ul li:hover ul {display: block;}*/
  55.  
  56. .ed {display:block;top:-18px;left:-20px;}
  57. .er {display:block;top:-18px;left:-20px;}
  58. .eq {display:block;bottom:20px;left:-20px;}
  59. #nav li.sd {padding-top:-10px;}
  60. .aq {display:block;top:-18px;left:20px;}
  61. .wa {display:block;top:-18px;left:20px;}
  62. .sd {display:block;}
Jan 21 '09 #1
0 2934

Sign in to post your reply or Sign up for a free account.

Similar topics
0
16147
CSS vertical pop-down menu ...sub-menu drop down problem
by: vikram.cvk | last post by:
Hello Experts, Im trying to design a CSS vertical drop down menu which should have the following functionality. Home About Us | -->Overview
HTML / CSS
5
1643
Problem with CSS and drop down menus
by: Xarky | last post by:
Hi, I followed this link to design my drop-down menu: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/odc_fp2003_ta/html/OfficeFrontPageCreateDropDownMenu.asp The css file being...
Javascript
7
3326
Custom build DataGridColumn event problem
by: Girish | last post by:
OK.. phew. Playing with data grids for the past few days has been fun and a huge learning experience.. My problem. I have a requirement to display a gird with a gird. Within the embedded grid,...
ASP.NET
6
8286
Dynamic drop down list
by: mcgrew.michael | last post by:
I hope this is the right group. I am very new to ASP so this is probably a stupid question. I have some vbscript that query's AD and populates a recordset. I know the recorset contains the...
ASP / Active Server Pages
4
9273
CSS Drop Down Menu in IE7
by: TycoonUK | last post by:
Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...
HTML / CSS
2
2891
dynamic menu problem with onchange event
by: chobo | last post by:
Hi, I am trying to make a dynamic menu using javascript and an xml file. The structure of the page (test.html) is in the code below. When I load up the page the drop-down list is there, so I select a...
Javascript
14
2231
dynamic nav/drop-down...
by: maya | last post by:
hi, I need help with a dynamic nav menu, http://www.mayacove.com/design/nav/nav.html it looks like I want it in IE 7, but in FF and IE 6 it's totally messed up.. in FF the main-nav section...
HTML / CSS
2
1194
problem with IE
by: dinky | last post by:
the menu are displayed properly in FF,i.e. below the header part, but in IE the menus are shifted to upwards beside the logo. and hence it goes out of the page. please help ..... here's the css ...
HTML / CSS
5
5824
Problem with horizonal dropdown css menu in IE6...
by: jerry101 | last post by:
Hi, I've been working on a horizontal drop down menu today, and I can get it to display perfectly in everything bar IE6. Basically instead of them lining up horizontally, they line up...
HTML / CSS
0
7137
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
7347
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
1
7073
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
7506
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
5656
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
0
4732
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
C# / C Sharp
0
3218
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
Networking - Hardware / Configuration
0
1571
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
C# / C Sharp
0
443
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us