HTML Drop Down Menus
Topics
Hello im looking for a script for my website that offers the following I have an image link, that I want to rollover to another image (Of the text glowing) then have a drop down menu pop up below it that can have other menus drop down from that one.) Right now Im trying a Javascript that I found for free on the internet but i cant seem to get it working. http://javascript-array.com/scripts/...rop_down_menu/ But I cant get it to be a rollover image instead of a text box. and it doesnt support multiple drop downs like this one: http://javascript-array.com/scripts/..._down_menu/?sb plus they want you to pay for it, and im looking for a free solution. Any help appreciated, thanks. I am having trouble with a website I am creating for my local pool league. the problem is that I am going to have a lot of pages in the website and obviously dont want to have to edit every page individually if I change the menu. To combat this I have tried using a frame with the menu inside and the content below but as it is a drop down menu, only a couple of the menu items appear without having to scroll the frame. Is there a way to combat this, perhaps even a different method to using a frame? I am definatly amature at best when working with HTML/Javascript so please be patient. Thanks for any help Phoenix_fiames Hi All, This is my first post so please be kind I am currently trying to create 3 drop down menus in a top frame going across the top of the page. This is my first time trying to do anything like this and have run into a few issues i cant get my head around nor find an answer on the net. The code i have so far is this: _______________________________________________________________ <HTML> <HEAD> <TITLE> Test</TITLE> <BODY> </BODY> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> </HEAD> <div align="center"> <table border="1" cellpadding="4" width=500> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> </HTML> _______________________________________________________________ 1) When selecting 'User Manuals' on the drop down box, it opens up a new window and directs me back to the home page? 2) i am unsure as to how you place the drop down boxes side by side aligned at the top of the page? Is anyone able to help me out here? Cheers in advance So, I am new to html, but I want my site to have a drop down menu, much like that of IBM's. http://www.ibm.com/us/en/sandbox/ver2/ Is this even possible with HTML? If so, where do I start? Regards, YahtzeeFish Hi , I've been wondering why my simple HTML website has slower drop down menu's at the top at LaptopBackpacks.com It takes a moment for the menu to drop down at the top ..Mens | Womens | Youth Compared to my competitor who's drop down menu's drop now instantly after hovering over them. What causes this slower speed? Suggestions? Hi, I am working on a form. The second question depends on what the user has selected for the first question, so I have managed to set it to "Hidden" onload. This works fine. The first question is a drop-down menu option, and depending on the answer given will determine weather question 2 needs answering. I can get question to appear, if the user selects an answer needing question two answering. But if they make a mistake and decide to change the answer, question 2 won't hide again. Here is the script and html: Code: <script language=javascript type='text/javascript'> function hidediv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'hidden'; } else { // IE 4 document.all.hideshow.style.visibility = 'hidden'; } } } function showdiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'visible'; } else { // IE 4 document.all.hideshow.style.visibility = 'visible'; } } } </script> <body id="tt13" onload="javascript:hidediv()"> Code: <li> <h3> Services Required</h3> <label for="website">What services will you need?<br /> <select name="website" class="textarea" id="websites" onchange="javascript:showdiv()"> <option selected="selected" onchange="javascript:hidediv()">Please Choose:</option> <option onchange="javascript:showdiv()">Web Site Only</option> <option onchange="javascript:showdiv()">Web Site & Hosting</option> <option onchange="javascript:showdiv()">Web Site & Domain</option> <option onchange="javascript:showdiv()">Web Site, Hosting & Domain</option> <option onchange="javascript:hidediv()">None of These</option> </select> </label> </li> <li id="hideshow"> <br /> How many pages do you think will you need?<br /> <select name="Pages" class="textarea"> <option value="#" selected="selected">Please Choose:</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20+</option> <option>I'm Not Sure.</option> </select> </li> I think it's something I've set wrong in onchange"" etc.. I've tried "onclick". Any ideas why the menu won't hide again? OK, I have a JavaScript code that toggles between the visibility of a div. When my mouse hovers over an element (lets say an li ), it would display the hidden div, on mouse out it would hide it again. When the drop down becomes visible, I click on any one of its links it takes me to the next page. The problem now is that if I was to then press the back button, the drop down menu would remain up, despite the fact that its not being triggered! Is there a code i'm missing that should correct this? How do I ensure if the user were to hit the back button, the div would reset to its original state? p.s. I had to cut some code out from the html, it exceed the character limit, but all the necessary codes are there. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>facpros</title> <link rel="stylesheet" type="text/css" href="css1.css" id="default"/> </head> <body style="padding-top:0px;margin:0px;padding:0px;background-image:url('images/bg.png')" > <script type =" text/javascript" src="fac.js" > </script> <!--beginning of div top--> <div id="top"class="topstyle" style="left: 0px; top: 0px; " > <!--the logo div--> <div id="logo" style="width:285px; height:110px;position:relative; left: 0px; top: 0px;background-image:url('images/facproslogo.png')"> </div><!--end of logo div--> <!--begining od facpros def--> <div id="feder" class="fed" style="float:right; margin:0px; top: -110px;"> <p class="fac" style="position:absolute; width: 565px; left: 81px; top: 6px;"> Federation des Amis Chretiens pour la Promotion Sociale </p> </div><!--end of facpros def--> <!--navigation menu list--> <div id="Navigation" style="left:0px; top: -110px; float:right;" > <ul class="nav" > <li class="nli" id ="home" onclick="window.location.href='home.html'"style="width: 61px" ><a><span>Home</span></a></li> <li class="nli"id ="about" onmouseover= "fabout('over')" onmouseout="fabout('out')" ><a><span>About Us</span></a> <ul id="aboutdrop"style="visibility:hidden;position:absolute;list-style:none;z-index:1;top:45px;left:81px;text-align:left;"> <li onclick="window.location.href='about.html'" class="ischild" style=" width:150px;left: 0px; top: 0px;line-height:2em;height:30px;" > Mission </li> <li onclick="window.location.href='leader.html'" class="ischild" style=" width:150px;left: 0px; top: 31px;line-height:2em;height:30px;" > Leadership </li> <li onclick="window.location.href='member.html'" class="ischild" style=" width:150px;left: 0px; top: 62px;line-height:2em;height:30px;" > Member </li> <li onclick="window.location.href='sof.html'" class="ischild" style=" width:150px;left: 0px; top: 93px;line-height:2.3em;height:30px; font-size:13px;" > Statement Of Faith </li> </ul> </li> <li class="nli" id ="event" onclick="window.location.href='event.html'"><a><span>Events</span></a></li> <li class="nli" id ="photo" onclick="window.location.href='photo.html'"><a><span >Gallery</span></a></li> <li class="nli" id ="contact" onclick="window.location.href='contact.html'"><a><span >Contact Us</span></a></li> <li class="nli" id ="lang" onmouseover= "flang('over')" onmouseout="flang('out')" ><a><span >Language</span></a> <ul id="langdrop"style="list-style:none;width:100px; position:absolute; left:351px; top:61px;background-color:transparent;visibility:hidden;z-index:1;"> <li onclick="window.location.href='frhome.html'" class="ischild" style=" width:100px;left: 0px; top: -16px;line-height:2em;height:30px;" > French </li> <li onclick="window.location.href='home.html'" class="ischild"style="width:100px;left:0px; bottom:-47px; height:30px;line-height:2em; "> English </li> </ul> </li> </ul><!--navigation ul--> </div><!--end of navigation menu div--> </div><!--end of div top--> </body> </html> Code: body{ background-color:gray; } p.fac{ font-family:"Lucida Calligraphy"; color:white; position:relative;font-size:large; margin-left:auto;margin-right:auto; } li.ischild{ height:20px; position:absolute; text-align:center; background-color:#f0f0f0; cursor:pointer; color:black; border:thin gray solid; text-align:left; padding-left:5px; } ul.nav{ font-family:Copperplate33bc; list-style:none; padding: 0; margin: 0; font-size:14px; height:45px; } div.fed{ background-color:maroon; position:relative; width:715px; height:65px; } div.topstyle{ top:0px; background-color:transparent; height:110px; width: 1000px; margin-left:auto; margin-right:auto; position:relative; } div.topcenter{ background-image:url('images/topcenterbgblue.png'); height:286px; width: 1000px; margin-left:auto; margin-right:auto; position:relative; } div.mbstyle{ background-color:white; width:1000px; position:relative; margin-left:auto; margin-right:auto; height:390px; } div.bstyle{ background-color:white; height:100px; width: 1000px; margin-left:auto; margin-right:auto; position:relative; } a:link,a:visited{ text-decoration:none;color:black; } a:link.nn,a:visited.nn{ text-decoration:none; color:#666666; margin-bottom:auto; margin-top:auto; font-family:'Times New Roman', Times, serif; font-size:small; } #Navigation{ width:715px; position:relative; background-image:url('images/navbg2.png'); } li.nli { float: left; display: block; text-decoration: none; text-align: center; padding-left:10px; padding-right:10px; width:auto; height:45px; line-height:3.5em; border-right-width:2px; border-right-style:groove; border-right-color:#CCCCCC; cursor:pointer; background-image:url('images/hoverbg2.png'); } td{ padding-left:50px;padding-right:100px; margin-bottom:auto;margin-top:auto;font-family:"Times New Roman", Times, serif; color:#666666; } #navigation li{ } .ischild:hover{ height:20px; position:absolute; text-align:center; background-color:#c0c0c0; cursor:pointer; color:black; border:thin gray solid; text-align:left; padding-left:5px; } .nli:hover{ float: left; display: block; text-decoration: none; text-align: center; padding-left:10px; padding-right:10px; width:auto; height:45px; line-height:3.5em; border-right-width:2px; border-right-style:groove; border-right-color:#CCCCCC; cursor:pointer; background-image:url('images/hoverbg.png'); color:#990000; } Code: function fabout(status) { switch(status) { case("over"): { document.getElementById("aboutdrop").style.visibility ='visible'; }break; case("out"): { document.getElementById("aboutdrop").style.visibility ='hidden'; }break; } }//end of fabout /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function flang(status) { switch(status) { case("over"): { document.getElementById("langdrop").style.visibility = "visible"; }break; case("out"): { document.getElementById("langdrop").style.visibility = "hidden"; }break; } }//end of flang Hello, I am in the very early stages of redesigning our home page. The drop down menus at the top of the page fall behind our rotating (slideshow) images. http://jaxpubliclibrary.org/new-home3.html Z-index does not work to correct this problem. I'd appreciate any help you can give me. Thank you. Linda trying to accomplish creating a drop down menu for the anchors of a page. any help or code would be greatly appreciated. any further details needed please dont be shy Example Drop Down-> Products Description->to anchored section. For multiple anchors. Thanks for your time. I have created a custom html dropdown menu for my site. The thing is it looks perfect in Firefox 5.0 (for me it does anyway) and works just as expected but in other browsers such as Opera 10.60, Chrome 5.0.375.125, it doesn't work properly. and it works semi ok in IE 8. For example if I hover over one of the menu buttons in opera or chrome there is meant to be a drop down box, this doesn't show in Opera or chrome but does in IE? You can view the menu on my test site - http://www.themidwiferysanctuary.com/testsite/ There is more to the menu, you can use the following log in - Username: Jade Password 130489 Does anyone have any thoughts on how to get the dropdown compatiable with all (or most) browsers? I would post the code but it won't let me even when using the code tags.......... If you want to see the javascript code then please just let me know. Im not sure any of the above makes sense?? Thank you, Jade Hello, Is it possible to create drop down menus from table cells (i.e., moving mouse over a cell activates a drop down menu)? If so, could you possibly point me to an example to see how it is done? Thanks! not sure if i need a js for this but I have a web page using page jump links to navigate a FAQ page. However, I would rather have a drop down menu/form with the links instead of a list of text links. Anybody have a clue? thanks in advance. This is what I have so far as an example... <form name="jump"><select id="select" name="select"> <option value="" selected="selected">Select</option> <option value="#1">Category 1</option> </select></form> <a id="1" name="1"></a> Category 1 Hello, I'm working on website and I want to use spry drop down menu bar and I have trouble with it. This is how I want it to be like : When menu is active(rollover hover), it turns darker blue from light blue, and the submenu is same light blue when its not active, but it turns to pink when its active. By far, what I got is : When I roll over submenu, the color is not different from the menu unless the submenus has subsubmenu.... (its orange, but I'm gonna change to pink) like this: It is kinda hard to explain.. but I hope you understood. Thank you very much! --------- here is code : I didn't make any change for the upper part, and this is only part that I made changes. and I only changed colors. --------- } ul.MenuBarHorizontal a{ display: block; cursor: pointer; background-color: #33CCFF; padding: 0.5em 0.75em; color: #FFFFFF; text-decoration: none; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #336699; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #FF3366; Hello, I am trying to create a website with muti level menu for the following HTML. I have attached 3 files here. 1. Outdoor.css is HTML css file 2. jqueryslidemenu is muti level menu css 3. jqueryslidemenu is muti level menu js I edited all three files with my HTML code i could not get result that i wish. navigation bar is displayed but muti level menu is not displayed. How to overcome this? Thanks, Suresh.G Hi All, I have one problem in HTML, I have a HTML file with drop down menu and a flash banner in bottom , while mouse over the menu the drop down is not visible in the top of the flash banner its going back side, can any one help me out how to bring the drop down menu top of the flash banner. Here is the sample link where I have the problem http://vivek192.5gbfree.com/index.html ____________________________________ sport book betting steroid I just decided to add flash to my website. (dummy site: http://www.swan10.nl/Test/index.htm) however my drop down menu now disapears behind my navigation bar. while I though I fixed this particular problem earlier with my drop down menu and the div. but apperantly browser are set by default to display the flash content in the top most layer. I want to display the flash above the background, but behind the drop down menu. How would I go about doing this? I tried z-indexing and such but that doesn't seem to have any effects. please advice thanks! Id like to do a drop down menu similar to there's... is there any simple way of doing this?! Hi, I have a website built in HTML and CSS in DW CS4. I have a horizontal top navigational menu and wish to add a drop down menu. When I select the entire menu and click on properties I can add a vertical menu item, but it is not an actual drop down. when I copy the html from another site that does have a functioning drop down, it does not work. So this is what it looks like: <div id="runner"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="page1.html">page 1</a></li> <li><a href="page2.html">page 2</a></li> what shoudl the code look like to add a drop down menu to each of these pages? Or should I do something in my spry menu? Can anyone help me with this? I need two cells to be next to each other. One is a label and the other is a drop down menu. The following code just shows the options next to each other as text. This is also being done in VB.net Code: "<td class=select <option>Fresh Milk</option> <option>Butter</option> </select></td>" & _ Nevermind, got it fixed! Hi, the problem I'm having now is that while using the SPRY Drop-down menu I can not get it to resize the main button row to 20px. It simply won't do it. The font is only 10px, so I really don't see why it's not doable. Also, there is a downward arrow gif image that I can't seem to get rid of either! Please help! Hi, I'm being outsourced to turn an image into a website and I've been jumping through hoops all night trying to create a simple drop-down menu... Obviously it's not going well. All I want is that it is no more than 20px high, black no borders, white Arial Black or Verdana 10px all caps BOLD font, text mouseover to #fbb03b.. drop-downs that have a dark grey border on the bottom only (no other sides should have borders) and mouseover to #fbb03b for each link (same text formatting as base menu). This is becoming incredibly difficult for me, and things just keep going wrong. I'm using Adobe DreamWeaver CS4. This project is due in 12 hours, and I haven't slept, so I'm not exactly in for a learning experience right now, I just need immediate and effective help. Please help if you can. Thanks very much. On my website I am trying to make a drop down menu change a script below it. If you go to http://www.breezybucks.com/article/newtemplate and click on "Custom Order Prizes" on the left you should see a drop down menu and an amazon flash file below it. I want it to be so that when you change from "Video Games" to "Electronics", it will load another flash file (from an already made amazon script). Here is my script right now... Quote: <select NAME="amazon"> <option>Video Games</option> <option>Electronics</option> <option>Books</option> </select> <Amazon Flash Script> <2nd Amazon Flash Script> Any idea how to do this? Hi, does anybody have a link that could point me in the right direction of learning about a drop down menu that is used as a search option? Such as in this site here- click me! So basically the viewer can enter one of two fields to bring back the relevant info, in this case either a designer or price range option. I've not done one of these before, but think it would be useful on my site! advice appreciated, thanks!! Hi! I hope you guys can help with what is wrong here. Ive been slaving over this html trying to get it to work and I gave up. Heres my problem. I have two drop down menus on this page. However the right drop down menu only goes to a page from the menu on the left. I have them separated, Brazil and Romania, so the Romania menu links pull up one of the Brazil pages and I dont understand why because in the html I have clearly specified the links to go to different pages. I will attach the html used and ask someone to please point out the source of this html conflict. I've been researching changing the colour of an arrow in a standard drop down menu. It seems it isn't possible. With further research I found that the colour and roll over state is controlled by whatever windows theme you are using. I changed my theme a few times and this is correct. However, before I give up, just thought I'd ask... Does anyone know a way to change this with code? If not, is there a way to make your own drop down box which is cross browser compatible? I think it can't be done, prove me wrong get a bottle of rum Good day guys... is there anyone who can share about drop down menu's here is the code i am using so far </FORM> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> <select name="gourl"> <option value="">Services </option> <option value=href="I.T Audit.html">I.T Audit </option> <option value="/" >PC and Laptop repairs </option> <option value="http://www." >Upgrades </option> <option value="http://www.ggce-environmental.org/index.html">Networking Installation</option> <option value"">PC's to your specification</option> <option value"">PAT Testing</option> <option value"">Bespoke Database Design</option> <option value="">Service Level Agreement</option> <option value="">Engery Audit</option> <option value="">Internet Service Provision</option> </select> <INPUT TYPE=SUBMIT VALUE="Go"> im aware the href="i.t audit" is wrong it's supposed to be just the full url, but it's not working any help? cheers my flash banner is in front of my drop down menu in IE, so u cant see my drop down menu.... but it works fine in firefox, and safari... http://www.briangelhaus.com/spencer my friend told me to z-index the drop down menu to 1 so its in front of the flash...i tryed that, but im not sure where to put it in the drop down menu, and it still doesnt work, he also told me maybe insert flash in a different way than the default way that dreamweaver gives u. i tried that too, and it doesnt work. any ideas on how to make the flash behind my drop down menu in IE? maybe just use a totally different drop down also? Hi, i got drop down menu from Dynamic DDM, however, there is only 1 level down. Anybody knows how to make another level down? This are the code: Code: <div id="bluemenu" class="bluetabs"> <ul> <li><a href="#" rel="dropmenu1_b">Administrator</a></li> <li><a href="#">Member</a></li> <li><a href="#" rel="dropmenu2_b">Testing</a></li> </ul> </div> <!--1st drop down menu --> <div id="dropmenu1_b" class="dropmenudiv_b"> <li><a href="#">admin1</a></li> <li><a href="#">admin2<a></li> </div> <!--2nd drop down menu --> <div id="dropmenu2_b" class="dropmenudiv_b"> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> </div> Hai everybody.. I want to create a html drop down menu. I created a menu using template toolkit, but i want to create this in html code.Caan anyone help. Pls find here what i done. { title = 'Enterprise Name' type = 'select' dropdown_field = arr_Ent_NameId (This is the array which contains all the data i.e enterprise name. name = 'ent_id' } How can i do this in html. In the select and value button , how can i use this array Hi, I wish to insert a drop down menu system on a page on my website that does the following (example). Drop Down Menu 1 "Product" --------------------------------------- Please select 0 Product A 1 Product B 2 then when you select e.g. Product A from this menu, this opens a new drop down menu called "Colour" directly below the original drop down menu-1 Drop Down Menu 2 "Colour" --------------------------------------- Please select 0 Green 1 Red 2 But if you select Product B from the first menu, it opens a slightly different drop down menu called "Size" Drop Down Menu 3 "Size" --------------------------------------- Please select 0 Medium 1 Small 2 So basically initially i want only Menu 1 visible, but when you select different options within the menu, you get a different drop down menu selection so basically different drop down menu selections for various scenarios based on the selection in the first menu so from menu 1, selecting: - Product A gives a menu about its colour - Product B gives a menu about its size - Product x gives a menu about its y so many thanks for all of you that help me. sorry for sounding confusing or stupid, i just dont know the correct jargon for my aims thanks Hi, I was trying to create a drop down menu so that there are more links the user can access, but when I opened it in IE, i noticed that when i move my mouse to the interface that initiates the drop down, the drop down actually drops down at the wrong place. for example, if i have the drop down menu bar in the middle of the screen, and move my cursor to the bar, the drop down would occur at the top of the screen. When I tried this in firefox, it works fine. Can anyone help me out? I'm trying to center the drop menu x horizontal code from the following url: http://www.gosu.pl/MyGosuMenu/ The problem is every time I center it all browsers except Internet Explorer mess up when you try to resize the window. For example in Firefox if you center the drop down menu and hover your mouse over the drop down menu it will line up but then if resize the Firefox window and hover your mouse over the drop down menu again the drop down options will not line up. For centering I've tried centering with CSS and using the <center> tag and both ways cause this same problem. Any help with this would be appreciated. Thanks, Jeff Hello everyone. Great website! I have been trying to fix a problem with my menu in mozilla. Everything seems perfect in internet explorer so does anyone mind having a look and maybe tell me how to fix it. It is the first website i have built apart from a 1 pager once. If i give you the web address, look at it in IE then go through the menu, then do the same with mozilla if you don't mind. In mozilla when you mouse over the menu it covers half the menu and there is a border thingymijig. You'll see when you have a look. The website is for our local football team, and it is nowhere near finished but i would really like this problem sorted. I have been messing about with some pages - the bit at the top to see what makes any difference, i'm meaning the - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> bit. Which 1 is the best to use? Any help would be greatly appreciated. Thank you! http://www.byronboysclub.com This is my code in html. Everytime i open, the menu is expanded, how do i make it contract when i first open up?? Many many thanks for your help, this really is a tough one for me.. HTML Code: <ul id="menu"> <li>WORK <ol> <li><a href="work/prada.html" onclick="return loadIframe('ifrm', this.href)" >Prada I</a></li> <li><a href="work/bloom.htm" onclick="return loadIframe('ifrm', this.href)" >Prada II</a></li> <li><a href="work/willow1.htm" onclick="return loadIframe('ifrm', this.href)" >The Willow Tree</a> </li> <li><a href="work/haaz.htm" onclick="return loadIframe('ifrm', this.href)" >HAAZ</a></li> <li><a href="work/bloom.htm" onclick="return loadIframe('ifrm', this.href)" >Dive</a></li> <li><a href="work/secret.htm" onclick="return loadIframe('ifrm', this.href)" >Secret</a></li> <li><a href="work/bloom.htm" onclick="return loadIframe('ifrm', this.href)" >Sink</a></li> <li><a href="work/succubus.htm" onclick="return loadIframe('ifrm', this.href)" >Succubus</a></li> <li><a href="work/tigerlily.htm" onclick="return loadIframe('ifrm', this.href)" >Tigerlily</a></li> <li><a href="work/treat.htm" onclick="return loadIframe('ifrm', this.href)" >Treat</a></li> <li><a href="work/taciturn.htm" onclick="return loadIframe('ifrm', this.href)" >Taciturn</a></li> <li><a href="work/wine.htm" onclick="return loadIframe('ifrm', this.href)" >Wine</a></li> </ol> </li> <li>KINDLING <ol> <li><a href="work/maze.htm" onclick="return loadIframe('ifrm', this.href)" >Maze</a></li> <li><a href="work/hive.htm" onclick="return loadIframe('ifrm', this.href)" >Hive</a></li> <li><a href="work/cannibal.htm" onclick="return loadIframe('ifrm', this.href)" >Cannibal</a> </li> <li><a href="work/hide.htm" onclick="return loadIframe('ifrm', this.href)" >Hide</a></li> <li><a href="work/swan.htm" onclick="return loadIframe('ifrm', this.href)" >Swan</a></li> <li><a href="work/bats.htm" onclick="return loadIframe('ifrm', this.href)" >Bats</a></li> <li><a href="work/willowhorse.htm" onclick="return loadIframe('ifrm', this.href)" >Willow Horse</a></li> <li><a href="work/fountain1.htm" onclick="return loadIframe('ifrm', this.href)" >Fountain 1</a></li> <li><a href="work/fountain2.htm" onclick="return loadIframe('ifrm', this.href)" >Fountain 2</a></li> <li><a href="work/toymaker.htm" onclick="return loadIframe('ifrm', this.href)" >Toymaker</a></li> <li><a href="work/shattered.htm" onclick="return loadIframe('ifrm', this.href)" >Shattered</a></li> <li><a href="work/ballad.htm" onclick="return loadIframe('ifrm', this.href)" >Ballad</a></li> <li><a href="work/vanity.htm" onclick="return loadIframe('ifrm', this.href)" >Vanity</a></li> <li><a href="work/femalearabesque.htm" onclick="return loadIframe('ifrm', this.href)" >Female Arabesque</a></li> <li><a href="work/malearabesque.htm" onclick="return loadIframe('ifrm', this.href)" >Male Arabesque</a></li> <li><a href="work/harebindle.htm" onclick="return loadIframe('ifrm', this.href)" >Hare/Bindle</a></li> <li><a href="work/catchbatter.htm" onclick="return loadIframe('ifrm', this.href)" >Catch/Batter</a></li> <li><a href="work/jungle.htm" onclick="return loadIframe('ifrm', this.href)" >Jungle</a></li> <li><a href="work/hound.htm" onclick="return loadIframe('ifrm', this.href)" >Hound</a></li> <li><a href="work/mer.htm" onclick="return loadIframe('ifrm', this.href)" >Mer</a></li> <li><a href="work/X.htm" onclick="return loadIframe('ifrm', this.href)" >X</a></li> <li><a href="work/K.htm" onclick="return loadIframe('ifrm', this.href)" >K</a></li> <li><a href="work/dahlia.htm" onclick="return loadIframe('ifrm', this.href)" >Dahlia</a></li> <li><a href="work/head.htm" onclick="return loadIframe('ifrm', this.href)" >Head</a></li> <li><a href="work/kindling-installation1.htm" onclick="return loadIframe('ifrm', this.href)" >Installation 1</a></li> <li><a href="work/kindling-installation2.htm" onclick="return loadIframe('ifrm', this.href)" >Installation 2</a></li> <li><a href="work/kindling-installation3.htm" onclick="return loadIframe('ifrm', this.href)" >Installation 3</a></li> <li><a href="work/kindling-installation4.htm" onclick="return loadIframe('ifrm', this.href)" >Installation 4</a></li> </ol> </li> <li>RECESS <ol> <li><a href="recess/crayoneater.htm" onclick="return loadIframe('ifrm', this.href)">Crayoneater</a></li> <li><a href="recess/horse.htm" onclick="return loadIframe('ifrm', this.href)">Horse</a></li> <li><a href="recess/trike.html" onclick="return loadIframe('ifrm', this.href)">Trike</a> </li> <li><a href="recess/flip.htm" onclick="return loadIframe('ifrm', this.href)">Flip</a></li> <li><a href="recess/supertron.htm" onclick="return loadIframe('ifrm', this.href)">Supertron</a></li> <li><a href="recess/pr01.html" onclick="return loadIframe('ifrm', this.href)">Homeopathic</a></li> <li><a href="recess/pr02.html" onclick="return loadIframe('ifrm', this.href)">Pickup</a></li> <li><a href="recess/pr03.html" onclick="return loadIframe('ifrm', this.href)">Flush</a></li> <li><a href="recess/pr04.html" onclick="return loadIframe('ifrm', this.href)">Wrestle</a></li> <li><a href="recess/pr05.html" onclick="return loadIframe('ifrm', this.href)">Chemistry</a></li> <li><a href="recess/pr06.html" onclick="return loadIframe('ifrm', this.href)">Mascot</a> </li> <li><a href="recess/pr07.html" onclick="return loadIframe('ifrm', this.href)">Confection</a> </li> <li><a href="recess/PRjump.html" onclick="return loadIframe('ifrm', this.href)">Jump</a> </li> <li><a href="recess/swing.html" onclick="return loadIframe('ifrm', this.href)">Swing</a> </li> <li><a href="recess/PRwave.html" onclick="return loadIframe('ifrm', this.href)">Wave</a> </li> <li><a href="recess/PRweep.html" onclick="return loadIframe('ifrm', this.href)">Weep</a> </li> <li><a href="recess/pink.html" onclick="return loadIframe('ifrm', this.href)">Pink</a> </li> </ol> </li> <li>SKETCH <ol> <li><a href="sketchbook/2009_mole_0.htm" onclick="return loadIframe('ifrm', this.href)">2009 Mole</a></li> <li><a href="sketchbook/2008_moleB_1.htm" onclick="return loadIframe('ifrm', this.href)">2008 Mole B</a></li> <li><a href="sketchbook/2008_mole.htm" onclick="return loadIframe('ifrm', this.href)">2008 Mole A</a></li> <li><a href="sketchbook/2008B_1.htm" onclick="return loadIframe('ifrm', this.href)">2008 Green</a></li> <li><a href="sketchbook/2007_1.htm" onclick="return loadIframe('ifrm', this.href)">2007 Blue</a></li> <li><a href="sketchbook/2006_1.htm" onclick="return loadIframe('ifrm', this.href)">2006 Black</a></li> <li><a href="sketchbook/2003B_1.htm" onclick="return loadIframe('ifrm', this.href)">2003 B</a></li> <li><a href="sketchbook/2003A_1.htm" onclick="return loadIframe('ifrm', this.href)">2003 A</a></li> <li><a href="sketchbook/2002B_1.htm" onclick="return loadIframe('ifrm', this.href)">2002 B</a></li> <li><a href="sketchbook/2002A_1.htm" onclick="return loadIframe('ifrm', this.href)">2002 A</a></li> <li><a href="sketchbook/2001C_1.htm" onclick="return loadIframe('ifrm', this.href)">2001 C</a></li> <li><a href="sketchbook/2001B_1.htm" onclick="return loadIframe('ifrm', this.href)">2001 B</a></li> <li><a href="sketchbook/2001_1.htm" onclick="return loadIframe('ifrm', this.href)">2001 A</a></li> </ol> </li> <li>BOUND <ol> <li><a href="books/pr1_1.htm" onclick="return loadIframe('ifrm', this.href)">PR vol. 1</a></li> <li><a href="books/pr2_1regular.htm" onclick="return loadIframe('ifrm', this.href)">PR vol. 2</a></li> <li><a href="books/pr2_1limited.htm" onclick="return loadIframe('ifrm', this.href)">PR vol. 2 Limited</a></li> <li><a href="books/fablescovers1.htm" onclick="return loadIframe('ifrm', this.href)">Fables: Covers</a></li> <li><a href="books/xoxo_1.htm" onclick="return loadIframe('ifrm', this.href)">XOXO</a></li> </ol> </li> <li>INFO <ol> <li><a href="biography.htm" onclick="return loadIframe('ifrm', this.href)">Biography</a></li> <li><a href="cv.htm" onclick="return loadIframe('ifrm', this.href)">CV</a></li> <li><a href="contact.htm" onclick="return loadIframe('ifrm', this.href)">Contact</a></li> </ol> </li> <li><a href="http://www.processrecess.com" target="_blank">BLOG</a> </li> </ul> I would if someone could tell me what to put, and where so my horizontal menu could have a scroll; the problem occured because one book of mine has 90 parts (Odlucio sam da te volim in this case) and it would be ugly to see all of them at once (it would be nicer if there was a scroll somewhere)...the whole page can be seen here link here is the code for that whole part...yes I know it's pretty long link <form method="post" name="nameform"> <font color="#9933CC" size="2" face="Times New Roman"><select name="tanyasmenu" size="1" style="BACKGROUND: #cc99ff; BORDER-BOTTOM: outset; BORDER-LEFT: outset; BORDER-RIGHT: outset; BORDER-TOP: outset; COLOR: #0066FF; FONT-FAMILY: Times New Roman; FONT-SIZE: 12px"> <option selected value="http://something.com">name here</option> <option value="http://something.com">name here</option> <option value="http://something.com">name here</option> </select> <input type="button" value="Go" onclick="location = document.nameform.tanyasmenu.options [document.nameform.tanyasmenu.selectedIndex].value;" style="BACKGROUND: #cc99ff; COLOR: #0066FF; FONT-FAMILY: Times New Roman; FONT-SIZE: 12px"> </form> Hi All! I would like to make a drop down box with all the departments of my company. Basically the user would select a dept and without refreshing or opening a new page the information would appear below. I have seen this before using a database but is there a way to do it without? Hi I'm trying to convince my work to change the design of their website. I have been told that if i can design something better, then they may consider it. However, I have no web building software here, and I have been told I am not able to work from home and get paid for it. I am able to write HTML and CSS in notepad, but I need a script to set up a horizonal drop down link menu. i.e. when you roll over the first link, it displays a list of options underneath... I need to have about 6-8 links with more options underneath. Can anybody suggest a reliable FREE script that I can use to demonstrate my idea?? LEROY Hey guys, I need help making a drop down menu. I know how to make a basic one, but this is what I need... I want to have 4 drop down menus, with about 4 choices in each one. Under them I need a 'Submit" button. Basically, I need it so that any combination of the 4 choices in the 4 menus will open a specific page. For instance, lets say in menu 1 I pick the word "cat". In menu 2, I pick the word "dog". In menu 3 I pick the word "car". In menu 4 I pick the word "tree". Once I click submit, a page with a picture of a cat, dog, tree and car would open up. (I would provide all the possible different pictures). So how would one do this? Any help is GREATLY appreciated, thanks! |