HTML - Problem With Menu Under The Stickyfooter

I just started learning HTML yesterday, and I'm still getting a hang of it. I put a table menu on the side of my page, and I want to program it, so when my mouse hovers over a specific option, another menu appears, i'll post a link to show what i mean, incase what i stated is confusing. Appreciate all help.
http://www.dar-us-salam.com/
I want to do with my table/menu the same as this website, or in this format.

Thanks for the help

Peace

Hi,
I have a problem with my spry menu and was wondering if there was a way of fixing it.

Firstly it only occurs in IE
Second, it fixes it self when I remove the IFRAME on the right (problems still there even if I use OBJECT instead of IFRAME)

The problem is, the spry menu bar sub menus wont open out in IE whereas it does in FF.

ANY help would be appreciated

Hi all

I have made a dropdown menu where the user is to select one of the options but I just cannot for the life of me workout which cose I need to use for that option to show up on the following page where all the writen details (which all work )exept for the chosen dropdown menu choice.

I hope I have made sence here.

Can anyone please help me.

I can copy and paste what I have if that will help.Just let me know please,

Hi guys,

www.ivoog.com - I am having a problem with IE 6 on the navigation menu. Open it up in IE 6 and mouseover the different buttons (scooters, miniscooters, bikes, atvs, accessories, etc). See how it kind of gets "messed up" when you mouseout? What is the problem? Is it a simple solution?

Here's my CSS: http://www.pics.ivoog.com/top/navigation.css

javascript: http://www.pics.ivoog.com/top/navi.js

If it's a fairly simple solution what do I need to change? Thanks!

Is there anything wrong with this li tag?

<li><a href="uc.html" class="underline">Item 1</a></li>

uc.html is located in the same directory.
The menu is disabled and doesn't work. I can't find out what the problem is.

Well while I got my menu working and looking how I wanted it I am having a problem in IE with it. If you start at the top of the menu and go down the flyouts don't flyout out. If you start at the bottom and go up the flyouts work and come out like suppose to. Problem is they stay out even you mouse isn't over it. You have to go back down the menu with your mouse for them to close. Is their a fix for this or something I missed. In Firefox it works perfect.

Here is the link

http://www.mesquitechristmas.com

Here is the CSS for the menu only....

Code:

Code:

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 12.29em;
		margin-top : -1.76em;
	} 

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 0px;
}

#avmenu li a {
font-weight: bold;
height: 17px;
text-decoration: none;
color: #505050;
display: block;
padding: 3px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
border-bottom: 1px solid #cccccc;
}	
	
#avmenu li a:hover {
background: #eaeaea;
color: #800000;
border-left: 4px solid #FF0000;

#avmenu li ul { 
/* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
	}
}

#avmenu li:hover ul ul, #avmenu li:hover ul ul ul, #avmenu li.sfhover ul ul, #avmenu li.sfhover ul ul ul {
		left: -999em;
	}
	
	#avmenu li:hover ul, #avmenu li li:hover ul, #avmenu li li li:hover ul, #avmenu li.sfhover ul, #avmenu li li.sfhover ul, #avmenu li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}

/*
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

*/

Here is the HTML for the menu

Code:

HTML Code:

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="christmasstory.html">The Christmas Story</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="#">Photos</a>
  <ul>
      <li><a href="2007photos.html">2007</a></li>
  </ul></li>
<li><a href="#">Videos</a>
  <ul>
      <li><a href="2007videos.html">2007</a></li>
  </ul></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li><a href="webcam.html">Web Cam</a></li>
<li><a href="webradio.html">Internet Radio</a></li>
<li><a href="http://www.noradsanta.org/" TARGET="_blank">Track Santa</a></li>
<li><a href="projects.html">Projects & How Tos</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>

Any help or advice on this matter would be great, Thanks

Reference:

http://www.skinquotient.com

This is a shopping cart using OSCommerce. In the left hand column, you will notice that the second item from the top is a drop down menu titled "Shop by Concern".

The length of some of the value in the shop by concern drop down menu are wider than the width of the left column.

In firefox, when you open the menu, the menu itself expands wider then the width of the column so life is good.

Of course, IE likes to make your life difficult, so in IE the menu values are truncated to fit the column width.

I don't want to make that left column wider - I want to leave as much room as possible in the main body for content. My preferred solution would be to somehow make that menu expand in IE like it does in firefox, however I don't know if this is possible.

Ideas are welcome!

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???

I am facing problem related to header menu. Please see attached file for clarification. Please suggest how i correct this error

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;

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

Hey there, I'm new to the forums, and never really asked for help on a site before, but I'm stuck.

Basically, i have a client that needs an automated way to send forms for bookings online. So far, i have created a basic HTML page that the client can import > as text in Outlook and the html gets placed into the Email. This works fine, as the user can fill out the form and reply back to us. The problem happens when i add the following code:

Code:

<select name="accomodation">
                <option value="" selected="selected">Please Select</option>
                <option value=""> -------------------------- </option>
                <option value="32">1 Bedroom Studio</option>
                <option value="41">1 Bedroom Spa</option>
                <option value="48">1 Bedroom Deluxe Spa</option>
                <option value="39">2 Bedroom Spa</option>
                <option value="42">2 Bedroom Deluxe Spa</option>
                <option value="45">3 Bedroom</option>
                <option value="46">Houses / Cottage</option>
              </select>

Now this code works when originally inserted into the email, i can make a selection and email it away, and the selection stays and is visible when opened. But once the email is sent, any further changes (a reply back, forward etc.) will break the drop down and just splatter the list in my table.

Is there any way to correct this? any other option of code i could use or a setting i can use to stop the break?

Help would be greatly appreciated.

Thanking you,

Evan.

Hi,

I have implemented 3 pull down menus to my website each calling a different method. Each pulldown menu has a series of values that lead the user to another site. My problem is that the only way they work is to right click on the popup blocker bar at the top of the page to allow popups. This is a problem because I need to implement it into a sharepoint webpart and the pages can not be blocked by a pop up blocker.

Is there a way to make the sites come up that are in the pulldown menu without a popup window??..that way they wont get blocked??

here is my html:

header:

function formHandler0(form)
{
var URL = document.form0.site0.options[document.form0.site0.selectedIndex].value;
window.location.href = URL;
}

body:

<input type=button value="Go" onClick="javascript:formHandler1(this)" target="_self" style="border: 2px ridge #FF9900">

i have this particular drop down menu in a wordpress PHP sidebar template, but i cant get it to execute once an option is selected. when i had this in another PHP page through a DW library item, it would execute just fine. here is the code...

Code:

<form name="guideform" id="guideform" action="#"> 
<select name="guidelinks" id="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> 
<option selected value="#">default</option>
<option value="option 1 url">option 1</option>
<option value="option 2 url">option 2</option>
<option value="option 3 url">option 3</option>
</select>
</form>

can someone tell me why this would work on one PHP page and not another? heres where i have the element in place on the page...

http://flyerflies.com/blog

also, another question...how can i adjust the width of the display pane once the menu is opened? in FF, it opens to show all of the contents, but in IE (surprise, surprise) it only opens to the same width as the default text display in the unopened drop down box.

Hi all,

[LINK REMOVED]

Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site.

So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right?

The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language.

The html looks like this:
Code:

			<!-- main navigation -->
			<ul id="nav">
				<li class="home">
					<a href="index.htm"><span>Home</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="message-from-director.htm">Message From Director</a></li>
							<li><a href="what-is-15-15.htm">What is 15/15?</a></li>
							<li><a href="festival-history.htm">Festival History</a></li>
							<li><a href="judges-special-guests.htm">Judges &amp; Special Guests</a></li>
						</ul>
					</div><a href="#"><span>About 15/15</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="register-now.php">Register Now</a></li>
							<li><a href="get-ready.htm">Get Ready</a></li>
							<li><a href="conditions-of-entry.htm">Conditions of Entry</a></li>
							<li><a href="faq.htm">FAQ</a></li>
						</ul>
					</div><a href="#"><span>How To Enter</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="screening-information.htm">Screening Information</a></li>
							<li><a href="nominations.htm">2009 Nominations</a></li>
						</ul>
					</div><a href="#"><span>Programme</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="films.htm">Films</a></li>
							<li><a href="festival-trailers.htm">Festival Trailers</a></li>						
						</ul>
					</div><a href="#"><span>Archives</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li>
						</ul>
					</div><a href="#"><span>Sponsors</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="press-releases.htm">Press Releases</a></li>
							<li><a href="images.htm">Images</a></li>
						</ul>
					</div><a href="#"><span>Newsroom</span></a>
				</li>
					<li class="contact">
					<div>
						<ul>
							<li><a href="contact-us.php">Contact Us</a></li>
							<li><a href="15-15-committee.htm">15/15 Committee</a></li>
						</ul>
					</div><a href="#"><span>Contact</span></a>
				</li>
			</ul>

...and the CSS looks like this:

Code:

#nav {
	font-size: 15px;
	line-height: 20px;
	list-style: none;
	padding: 0;
	position: absolute;
	top: 250px;
	left:-5px;
	width: 750px;
}
#nav li {
	display: inline;
	float: left;
	margin: 0 0 0 0px;
	position: relative;
}
#nav a {
	color: #000;
	float: left;
	text-decoration: none;
}
#nav a span {
	cursor: pointer;
	float: left;
	display: inline;
	font-weight: bold;
	line-height: 30px;
	padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
	background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
	background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
	background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
	left: auto;
	right: 0;
}
* html #nav .contact div {
	right: -1px;
}
#nav div {
	background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
	display: none;
	left: 0;
	padding: 5px 0 0;
	position: absolute;
	top: 30px;
	width: 168px;
	z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
	display: block;
}
#nav div ul {
	background: url(../img/bg-b.gif) no-repeat 0 100%;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0 0 5px;
	text-transform: none;
	width: 168px;
}
#nav div ul li {
	margin: 0;
	padding: 0;
	width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
	background: none;
	color: #000;
	display: block;
	line-height: 30px;
	padding: 0 0 0 9px;
	width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
	background: #D9581F;
}

Any ideas?

Thanks so much in advance...

Neil