HTML - Dropdown Problem In Ie7

im having trouble with a drop-down menu.
when i highlight the <li>'s that drop down, i can't do anything that will make them dissapear. here's my java:
Code:

      <script type="text/javascript"><!--//--><![CDATA[//><!--

      sfHover = function() {
	      var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	      for (var i=0; i<sfEls.length; i++) {
		      sfEls[i].onmouseover=function() {
			      this.className+=" sfhover";
		      }
		      sfEls[i].onmouseout=function() {
			      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		      }
	      }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);

      //--><!]]></script>

heres my html:
Code:

      			  <li><a href="#">About us</a>
	      			  <ul>
	      				  <li><a href="#">Our company</a></li>
		      			  <li><a href="#">Services we offer</a></li>
		      			  <li><a href="#">Meet our people</a></li>
		      		  </ul>
	      		  </li>

heres my css:
Code:

/* drop down navigation */

#nav, #nav ul {
	float: left;
	width: 100%;
	list-style: none;
	line-height: 0.6em;
	background: #333;
	font-weight: normal;
	padding: 0;
	border: solid thin #000;
	margin: 15px 0 30px 0;
	color:#fff;
}

#nav a {
	display: block;
	width: 124px;
	color: #fff;
	text-decoration: none;
	font-size:0.7em;
	padding:7px;
	border-left: solid 4px #000;
}

#nav li {
	float: left;
	padding: 0;
	width: 20%;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 10%;
	width: 13.9em;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
	padding:0;
}

#nav li li {
  margin-left:-1px;
	width: 13em;
}

#nav li ul a {
	width: 205px;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav a:hover{
	background: #444;
}

/* end of drop down navigation*/

any ideas???

Hello all,



I just got a job working for a school and noticed their website was pretty much unorganized. So yesterday i took up dreamweaver and created this page(the rest of the site is pending acceptance/working of this main page):



http://pratt.broward.edu/colejw/Attucks/



However, it did come with problems. In IE it displays fine, everything seems to work. But.. Firefox doesn't seem to like my menu bar and flash scroller combo. In firefox the flash scroller appears over the drop down menu, below is a picture of what i mean.







Everything below the menu bar is in a table, so its not the table itself since the drop down appears over the pictures and other text. The only thing overriding it is the flash scroller.



Anyone have any ideas? i played with Z-index and such but no luck and in one instance it moves everything from the menu down over to the right of the menu, i could also be placing the z-index's in the wrong place. If anyone has any fixes please let me know.

I'm not sure if anyone is familiar with spiceworks but it's a fairly nifty application, and I'm trying to customize a create ticket form. Things work fine for the most part, the problem I run into is when I create a dropdown menu for users to select a "program code" that populates to a text area. From reading the errors I can see what is happening but I just don't know how to fix it b/c of the way in which this textbox is named. My code is as follows.
Code:

<form name="form1" action="/portal/new_ticket" class="new-ticket" enctype="multipart/form-data" method="post" onsubmit="Portal.disableSubmit(this);return true">
<input class="text" id="authenticity_token" name="authenticity_token" type="hidden" value="pFUDFH3XRBtjFr+p3+pNaSdbkxj8XJAVcgj9BGcUvPo=" />
<h2>For help with an IT issue you are experiencing, please complete the form below.</h2>
<select name="menu" onchange="document.form1.ticket[description].value=document.form1.menu.options[document.form1.menu.selectedIndex].value;" style="background-color: transparent; font-size: 10px; color: rgb(0, 102, 153); font-family: verdana;">
<option value="#">Choose Program Code.</option>
<option value="01">01</option>
<option value="">02</option>
<option value="">03</option>
<option value="">04</option>
<option value="">05</option>
<option value="">06</option>
<option value="">07</option>
<option value="">08</option>
<option value="">09</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
</select>
<p class="summary"><label>Summary:</label><input class="text" id="ticket_summary" name="ticket[summary]" type="text" /></p>
<p class="description"><label>Description:</label><textarea id="ticket[description]" name="ticket[description]" type="text" value=""></textarea></p>
<p class="attachment"><label>Optional attachment: </label><input class="text" id="ticket_attachment" name="ticket[attachment]" type="file" /><a href="#" onclick="return Portal.resetHTML($(this).up('p'));; return false;">clear attachment</a></p>
<p class="button"><input name="commit" type="submit" value="Submit Request" /><em class="highlight"></em></p>
</form>

As you can see the name of the textarea is name="ticket[description]" and when I am assigning the value of the user selection to the textarea, onchange="document.form1.ticket[description].value=document.form1.menu.options[document.form1.menu.selectedIndex].value; the syntax b/c of the name is setup for "ticket" to have a variable "description" passed to it and I am then getting the error "description is not defined" which would make sense. I get the code to work if I simply change the name of the textarea to something like "ticket" but then I get an error when I try to submit the ticket in spiceworks, so it appears I need to find a different way of populating the textarea with out changing the name of the textarea. Is there another way to have my dropdown menu populate the textarea, maybe with javascript, where I can keep the name ticket[description] and not have the compiler thinking I'm trying to pass description? Any help is greatly appreciated.

Hi,
I am using css to create a dropdown menu. It works fine in all browsers except IE6. In IE6 a dropdown list covers the dropdown menu. please see the atachment/screenshot.
Here is the html/css code I am using.

HTML Code:

{
	position: relative; z-index: 1;}*/
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;

}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
 z-index: 599;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
 z-index: 598;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
 z-index: 598;
}

ul.dropdown li:hover > ul {
 visibility: visible;
 z-index: 598;
}

HTML Code:

<div id="header" class="header" style="background-image: url(./images/blue-curve.jpg); background-position: top;">
            <h1>
                Finance and Risk
            </h1>
            <ul class="dropdown dropdown-horizontal noPrint">
                <li><a href="#" class="dir">Data Management</a>
                    <ul>
                        <?php echo '<li><a href="main.php?PageName=import3' . SID . '">Upload Data</a></li>'; ?>
						<?php echo '<li><a href="main.php?PageName=list' . SID . '">Download Data</a></li>';  ?>
						<?php echo '<li><a href="main.php?PageName=delete' . SID . '">Delete Data</a></li>';  ?>
   		    			<?php echo '<li><a href="main.php?PageName=assetupdate' . SID . '">Update Data</a></li>';  ?>
                    </ul>
                </li>
                <li><a href="#" class="dir">Reports</a>
					<ul>
						<?php echo '<li><a href="main.php?PageName=reports' . SID . '">BS Overview</a></li>';   ?>
						<?php echo '<li><a href="main.php?PageName=CDO' . SID . '">CDOs</a></li>';                ?>
						<?php echo '<li><a href="main.php?PageName=impairment' . SID . '">Impairments</a></li>';   ?>
                        <?php echo '<li><a href="main.php?PageName=fvecapreport' . SID . '">FairValue and Risk</a></li>';?>
                        <?php echo '<li><a href="main.php?PageName=creditrisk' . SID . '">Credit Default Risk</a></li>';?>
                        <?php echo '<li><a href="main.php?PageName=securitydata' . SID . '">MarketData</a></li>';?>
					</ul>
				</li>
				<li><a href="#" class="dir">Files & Manuals</a>
					<ul>
		        		<?php echo '<li><a href="magnitude.pdf" target="_blank">Product Codes</a></li>';?>
						<?php echo '<li><a href="uploadmanual.pdf" target="_blank">Upload Manual</a></li>';?>
						<?php echo '<li><a href="main.php?PageName=osmdocs' . SID . '">OSM Files</a></li>';   ?>
					</ul>
				</li>
				<li><a href="#" class="dir">Miscellaneous</a>    		<ul>
		        		<?php echo '<li><a href="main.php?PageName=creditcrises' . SID . '">Credit Crises</a></li>';   ?>
					</ul>
				</li>
            		<?php if ($_SESSION['Admin'] == "Yes") { ?>
				<li><a href="#" class="dir">Admin </a>
					<ul>
		        		<?php echo '<li><a href="main.php?PageName=message' . SID . '">Flash Alerts</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel1.php?' . SID . '">Test Marcel1</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel2.php?' . SID . '">Test Marcel2</a></li>';   ?>
		        		<?php echo '<li><a href="testmarcel3.php?' . SID . '">Test Marcel3</a></li>';   ?>
		        		<?php echo '<li><a href="main.php?PageName=testajay1' . SID . '">Test Ajay1</a></li>';   ?>
		        		<?php echo '<li><a href="testajay2.php?' . SID . '">Test Ajay2</a></li>';   ?>
		        		<?php echo '<li><a href="testajay3.php?' . SID . '">Test Ajay3</a></li>';   ?>
					</ul>
				</li>
             		<?php } ?>
                <li><a class="dir" href="main.php?PageName=menu">Menu</a>
                    <ul>
                        <?php echo '<li><a href="logout.php">Logout</a></li>';   ?>
                        <?php echo '<li><a href="#">Change password</a> </li>';   ?>
                    </ul>
                </li>
                <li><a class="dir" href="javascript:window.print()" color="green">Print</a> </li>
            </ul>
        </div>

Any one has an idea how to get the css menu on top of the dropdown list?

Thanks in advance

I recently changed my navigation links from js to html and css based links but have a few problems with the layout, I wonder if you anyone can help?

http://www.for-rent-nerja.co.uk/

If you rollover the 'For Rent' dropdown do you notice how the dropdown is appearing under my sidebar! Is there any way to repair that?

It is running from http://www.for-rent-nerja.co.uk/nav_menu/style.css

I am also having problems stretching the width of the links to fit my 950px width, they seem to break apart after about 140px individually!

So for a while a have been trying very hard to create a dropdown menu for my navigation bar. I have searched the web long and hard for this and found little valuable information. I have a four link graphical navigation bar made from image sprites (see this tutorial) and have been trying to make a dropdown bar for just the second link. I know a bit of html/css but very little javascript which if I understand what I read from google, thats what I will need. Can anyone help please?

Hello, okay, so here's what i want to do: I want to create multiple dropdown boxes, and then have options inside the dropdown boxes have various values or attributes assigned to them, and then after all the options have been selected, then compare the various attributes of each option against each other, i'd like to compare it back against a spreadsheet of some sort, that would be easiest for managing the data and the various attributes, is it possible to check attributes of a dropdown selection on a spreadsheet of some sort? if so, how would that be done? if not, how else could the desired effect be achieved?

Hi all

i would like to know how to create a combobox/dropdown box that the user can use to up grade options on a pc and the price change with it?

here is an example http://www.gr-tek.com.au/proddetail.php?prod=Corei3

many thanks

Nick

hey

I'm new at the forum here and kinda need some help with a multi level drop down menu for my website.
there shall be 2 boxes where in the first one you can choose your Zipcode and then a box below to choose the city you are living in.
first time working with html and I'm not sure if it can be made be that, and i was thinking i could get some help with that for some one in here.

let me know if it's not understandable^^

^^thanks for the help^^

Hey!

What's the easiet way to create a link, and when it's pressed a little login form dropsdown from the link?

Cheers / DiNozzo

Any assistance that can be provided is greatly appreciated.

I am unable to get my dropdown menu to drop in front of my left column. I have copied the css and the html below. I am not sure if there is something wrong with the HTML or the css so please let me know if I need to post this to a CSS thread.

Thank you for any help provided.

#navigation
{
margin: 0;
padding: 0;
width: 100%;
background-color: #f5f5f5;
height: 1.3em;
float: left;
clear: both;
}

#navigation li
{
list-style: none;
float: left;


}

#navigation li a
{
display: block;
padding: 0 6px;
background-color: #f5f5f5;
color: #0000ff;
text-decoration: none;
border-right: 2px solid #fff;
font-size: 12px;}


#navigation li ul
{

display: none;
width: 10em;
background-color: #0000ff;
}

#navigation li:hover ul, #navigation li.hover ul

{ display: block;
position: absolute;
margin:0;
padding:0;
}

#navigation li:hover li, #navigation li.hover li
{
float: none;
}

#navigation li:hover li a, #navigation li.hover li a{
background-color: #0000ff;
border-bottom: 1px solid #fff;
color: #ffffff;
}

#navigation li li a:hover{
background-color: #0000ff;}

/* column container */
.colmask {
position:relative;
clear:both;
float:left;
width: 100%;
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;

}
/* 3 Column settings */
.threecol {
background-image: url('DCIMAGE3.jpg');
}
.threecol .colmid {
right:25%;
background-image: url('DCIMAGE3.jpg');
}
.threecol .colleft {
right:50%;
background-color: #ffffff;

}
.threecol .col1 {
width:46%;
text-align: center;
}
.threecol .col2 {
width:21%; left:31%;
}
.threecol .col3 {
width:21%;
left:85%; }


ul id="navigation">

<li><a href="www.zphibeasternregion.org">Home</a></li>
<li><a href="#">National Links</a><ul>
<li><a href="www.zphib1920.org">Zeta Phi Beta Sorority, Inc.</a></li>
<li><a href="http://www.zphib1920.org/antihazing.html">
Sorority's Statement on Hazing</a></li></ul>
</li>

<li><a href="#">States</a><ul>

<li><a href="DistrictofColumbia.htm">District of Columbia</a></li>
<li><a href="NorthCarolina.htm">North Carolina</a></li>
<li><a href="Virginia.htm">Virginia</a></li>
<li><a href="WestVirginia.htm">West Virginia</a></li></ul></li>
<li><a href="#">Contact us</a><ul>
<li><a href="regionalleadership.htm">Regional Leadership</a></li></ul>

</li>
</ul>

*****html
<div class="colmask threecol">


<div class="colmid">


<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<p>fajdflajslrejlaje;jerjekkj</p>
<!-- Column 1 end -->
</div>


<div class="col2">
<!-- Column 2 start -->
<p>fajdflajslrejlaje;jerjekkj</p>
<!-- Column 2 end -->


</div>

<div class="col3">
<!-- Column 3 start -->
<p>fajdflajslrejlaje;jerjekkj</p>

<!-- Column 3 end -->

</div>
</div>
</div>

Can somebody help me figure out how to add another <ul> to my dropdown menu?

I can't seem to get another menu item item from 'For Rent' -> 'Holiday' - 'Apartments' -> then here I want to list the locations 'Nerja', 'Torrox' and 'Frigiliana' but I can't get it to display properly.

Anyone got any pointers.

Html: http://www.for-rent-nerja.com/index_links.html
CSS: http://www.for-rent-nerja.com/scripts/index_links.css (the link css is at the very bottom)

Cheers
Jamie

I'm aware that the menu in my site can get too-big to display properly at low to medium resolutions and/or browser windows that aren't maximized, so after considering a couple of possible solutions i figured i'd fix it by putting everything into five general categories, two of which would have subcategories (and some of the subcategories would have subsubcategories, and that's as far as it goes). So...

...I'm looking for a code to turn my menu into a dropdown one. Now, as far as i'm concerned there are three types of dropdown menus, two of which i don't like and thus don't want. Google only returns results for one type, which, true to Murphy's law, is one of the two i don't want.

Example of the one i want: the one on the top menu on this site ("HOME", "TUTORIAL", "FORUM", "QUICK LIST") (with possibility of images and that kind of stuff)

Example of the one i don't want that Google returns: the kind on this site (default computer type)

Example of the one i don't want that Google doesn't return: the kind that appears when you click on "Search", "KotV Roster" or any of those links on this site (forum type)

I tried to copy the relevant code on the first page i linked to, but either i didn't copy all that's relevant or i'm doing something wrong with it. I considered both possibilities and tried to fix things, but all failed. So how do i do it?

Here's a rough picture of exactly what i want: click. I hope the notes and pictures are enough, but if something is unclear please ask away. Sorry for the weird font, but i didn't pay much attention to how the whole thing looked; it's just a quick sketch i made in two minutes.

Thanks in advance.

I'm sure this has been done before, but unfortunately im under the pump somewhat!

How do I get a drop down menu to post things to a textarea in html? As in when I select an item from a drop down menu how do i get this selection to show relevant information in a text area below..

TruskyMX

Please help Im sure there is post already just haven't looked yet.

Hi,
I have a menu that lets me select from multiple options, and I want that any option that I choose will lead me to another website, after that I click the submit button.
How I do this?

Code:

<form action="" method="post">

<select name="Dropdown Menu" id="menu">
<option selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<input type="submit" value="" id="button">
</form>

Thanks,
Steve