473,326 Members | 2,133 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

vertical drop down works for only one tab

am trying to create vertical drop down but it only works well for the first tab.
the HTML
Expand|Select|Wrap|Line Numbers
  1.  
  2. <div id="wraper">
  3.      <ul class="tabs">
  4.         <li>
  5.                 <ul id="tab_ul">
  6.             <li><a href=# onmouseover="javascript:showlayer('ul1')">HOME</a></li>
  7.                <ul id="ul1" class="subtab_ul1">
  8.                 <li><a href=#>SUB MENU TEXT 1</a></li>
  9.                 <li><a href=#>SUB MENU TEXT 2</a></li>
  10.                 <li><a href=#>SUB MENU TEXT 3</a></li>
  11.               </ul>
  12.           </ul>
  13.         </li>
  14.            <li>
  15.              <ul id="tab_ul">
  16.             <li><a href=# onclick="javascript:showlayer('ul2')">ABOUT US</a></li>
  17.                <ul id="ul2" class="subtab_ul1">
  18.                 <li><a href=#>SUB MENU TEXT 1</a></li>
  19.                 <li><a href=#>SUB MENU TEXT 2</a></li>
  20.                 <li><a href=#>SUB MENU TEXT 3</a></li>
  21.               </ul>
  22.           </ul>
  23.         </li>
  24.         <li>
  25.              <ul id="tab_ul">
  26.             <li><a href=# onclick="javascript:showlayer('ul3')">CONTACT US</a></li>
  27.                <ul id="ul3" class="subtab_ul1">
  28.                 <li><a href=#>SUB MENU TEXT 1</a></li>
  29.                 <li><a href=#>SUB MENU TEXT 2</a></li>
  30.                 <li><a href=#>SUB MENU TEXT 3</a></li>
  31.               </ul>
  32.           </ul>
  33.         </li>
  34.       </ul>
  35.  
  36.            </div>
  37.  
and the CSS
Expand|Select|Wrap|Line Numbers
  1.  
  2. li {list-style:none }
  3. ul {margin:0}
  4. #wraper { margin:0; background:#003366; height:30px; padding:4px; padding-bottom:0; font-weight:bold }
  5. #wraper ul li{ position:relative }
  6.  
  7. #tab_ul li{ float:left; background:#616CDA; margin-right:10px; height:30px }
  8. #tab_ul li a{ color:#FFFFFF; text-decoration:none;  line-height:30px; display:block; float:left; padding:0 26px 0 10px}
  9. #tab_ul ul { border:1px #616CDA solid; width:200px; border-top:none; background:#FFFFFF; position:relative; top:4px; padding:6px 0;clear:both;z-index:2;display:none; }
  10. #tab_ul ul li{ margin:0 6px; display:block; background:none; float:none;  border:none; height:auto; line-height:normal; border-top:solid 1px #DEDEDE; } 
  11. #tab_ul ul li a{  background:none;display:block;float:none;padding:6px; margin:0;border:0;height:auto;color:#003366;line-height:normal }
  12. #tab_ul ul li a:hover{ background:#e3edef;}
  13.  
May 31 '11 #1
3 2623
JKing
1,206 Expert 1GB
Looks like you are using javascript to show/hide layers. On the first tab you have used onmouseover while all the others use onclick.

Try changing the onclick to onmouseover for the rest of the tabs.
May 31 '11 #2
that missed me but its not the problem. the problem is, in the browser onmouseover event for the first tab moves the second and third tabs out of the <div> below the displayed submenus
May 31 '11 #3
JKing
1,206 Expert 1GB
Do you have a link to the project so I can see what's going on?
Jun 1 '11 #4

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

Similar topics

1
by: Kevin Long | last post by:
Hi there. I have been using Excel in conjunction with Visual Basic for writing a fluid flow program. I have 3 drop down boxes on the the spreadsheet and each time I select an item from the drop...
0
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
3
by: Russ | last post by:
I have a drop down list on a web page that I pre-fill onload from a SQL table using a SqlDataReader. The line of code that fills the drop down looks like this while(myReader.Read()) {...
0
by: kaon | last post by:
Hi, Ive been looking for a way to capture an autopostback event of a dropdownlist in a datagrid control. the scenario is that, ive a datagrid, and there is a dropdownlist column in each of the row...
0
by: jack | last post by:
Hi all, I this this would be the most common question to most of the professionals out there. but for me its a head ac I am developing in asp.net 2.0 and wanted to use drop down calender...
1
by: colleen1980 | last post by:
There is a radio button name Option934 and a check box name chk1Dtl11 in my form. I need help how to open a drop down when both are clicked. Drop down contains only two values from table...
2
by: bbatson | last post by:
Hello, Does anyone have any advice as to how to limit a drop-down selection in a table? For example, suppose I have two tables - essentially a one-to-many relationship. One table is...
4
by: ghjk | last post by:
I want to edit database values using my web application. So first i load data to test boxex and drop down list. But drop down list only contain one value. I want to put all posible value to that and...
0
by: rahullko05 | last post by:
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...
5
by: nfarrier | last post by:
I'm a school teacher trying to get a web page update working doing a drop-down menu. The code works at http://hms.sps.lane.edu but the update that uses more css, including "navigation body"...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.