473,883 Members | 2,139 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 2956

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

Similar topics

0
16177
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
5
1663
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 used is given below. Now I have made another table (with text) on the same html page, exactly under this menu. Now when I hover on the main menu items, the menu item opens its sub items. When the new sub menu opens, the text for the menu...
7
3355
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, theres a requirement to show a drop down menu list (this is a control I downloaded online) in one of the columns. For the purposes of this question, Ive implemented the drop down menu as a drop down list instead. Ive got all this working at this...
6
8318
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 information I want by doing a Response.write. I am having problems dynamically creating a drop down list from the data in the recordset. The drop down is created but it is empty. Any help would be greatly appreciated. A sample of the code: <% 'On...
4
9303
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 if it works, and if it does not, tell me why it does not work. Thanks.
2
2912
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 value from the list and it passes that value to the function to get the appropriate data and it prints out the values (which it does just fine). The thing is when I select an item from the drop-down list the other html disappears (even the...
14
2265
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 looks fine, but the drop-downs are totally messed up.. in IE6 for some reason the functionality is totally messed up, I get JavaScript errors, I guess that's for JS group....;)
2
1214
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 /* $Id: nice_menus_default.css,v 1.1.2.5 2007/10/29 16:35:34 add1sun Exp $ */ /* This is the default layout template for nice menus, and will provide a starting point for the look of your menus. To customize, it's recommended to create a...
5
5857
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 vertically instead. And this only happens when I don't give the LI in the menu list and fixed width, which I don't want because if I have a fixed width the menu list get's too long due to some words being longer than others and then it doesn't fit on the...
0
9945
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9798
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11160
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10863
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10422
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9588
agi2029
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6007
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4230
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3241
bsmnconsultancy
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.