Learn VBA & Macros in 1 Week!

CSS - Vertical Flyout Menu Problem

Full Excel VBA Course - Beginner to Expert

Vertical Flyout Menu Problem	View Content

I have a vertical flyout menu setup on the left side of the page with the associated links arranged in vertical columns next to each menu selection. It is working fine 99% of the time but I am getting some reports that the vertical columns do not touch the main selection column so that when the user moves the cursor to the right to go to the selection list there is a break between the columns and the column disappears before a selection can be made. I have not been able to duplicate this on my IE8 and it works fine with Firefox. This makes it rather hard to trouble shoot so I am hoping someone else has had this problem and know what I am talking about. It seems to only happen to users with IE7 and IE8 but not most IE8 users.
Is there perhaps some code I need to add to the CSS file that will solve this problem? THX

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Problem With Flyout Menu That Gets Hidden In Ie

Very Weird Css Flyout Menu Problem..

Flyout Menu Problems...ie Of Course

More Dropdown / Flyout Menu Fun

Div In Table In Ie Css Flyout Menu

Css Flyout Menu Slow Down The Display

How Can I Integrate A Dropdown Flyout Menu Into Pre-existing Images?

Odd Shaped Vertical Rollover Nav Menu Problem

Problem With Flyout In Both Firefox And Ie

Vertical Drop-down Menu - Sub-menu's Don't Appear Long Enough (time Not Length)

Vertical Sub Menu Bar

Need Help With Css Vertical Menu

Css Vertical Menu Doesn't Like Div Next To It Ie7

Vertical Drop Down Menu

Css Vertical Menu, Need Advanced Help In Ie7

Disappearing Vertical Menu Pop Out.

Vertical Drop Down Menu In Ie 7 And 6

Making A Menu Horizontal From Vertical

Change Vertical To Horizontal Menu

Searching For A Special Type Of Vertical Menu..

Learn VBA & Macros for Excel in 1 Week!

Problem With Flyout Menu That Gets Hidden In Ie

Similar Tutorials

Hello

I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing.

I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference.

I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem...

This is the page:

http://www.independentliving.co.uk/index.shtml

And this is the part of the style sheet for the menu:

.menu {
width:150px;
position:relative;
margin:0;
font-size:11px;
margin:0px 0;
z-index:100;

}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#003366; width:150px;
height:25px;
text-align:center;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#003366 url(nav.gif);
line-height:19px;
font-size:11px;
z-index:100;
}

.menu ul {
padding:0;
margin:0;
list-style-type: none;
z-index:100;
}

.menu ul li {
float:left;
margin-right:1px;
position:relative;
z-index:100;
}

.menu ul li ul {
display:none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#996600;
background:#cccccc;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:150px;
width:150px;
z-index:100;
}

.menu ul li:hover ul li a.hide {
background:#ffffff;
color:#003366;
font-size:11px;
text-decoration:none;
}

.menu ul li:hover ul li:hover a.hide {
width:150px;
font-size:11px;
text-decoration:none;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#cccccc;
color:#996600;
width:200px;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#666666;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#003366;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
background:#dfc184;
color:#003366;
font-size:11px;
text-decoration:none;
z-index:100;
}

.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
font-size:11px;
text-decoration:none;
z-index:100;
}

Any ideas gratefully received!

Thanks

Frances

Very Weird Css Flyout Menu Problem..

Similar Tutorials

I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested).

URL 1
URL 2

Check out the left-side navigation menus on those two pages.

Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet.

So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu?

Here's the path to the stylesheet:
Stylesheet 1

Flyout Menu Problems...ie Of Course

Similar Tutorials

Hello, everyone. I'm a relative newcomer to CSS, and I decided I'd try and add a neat flyout menu to the new site I'm developing: www.mindwallpictures.com.

As you'll notice, it works great in Firefox, but doesn't work at all in IE. Here is the CSS code from my site:

Code:

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at (URL address blocked: See forum rules)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
/* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#6b6b6b url(images/button.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#6b6b6b url no-repeat right center;} 

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border:1px solid #6b6b6b;
border-width:1px 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px;}
/* style the link hover */
* html .menu a:hover {color:#adbaad; background:#888d88; position:relative;}

.menu li:hover {position:relative;}

/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#adbaad; background:#888d88;}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#adbaad; background:#888d88;}
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}


/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}

</style>

and here is the html that goes with it:

Code:

        <div class="menu">
<ul>
<li><a href="index.html">MindWall Home</a></li>
<li class="sub"><a href="#nogo">News</a>
	<ul>

	<li><a href="news/recent/index.html">Recent News</a></li>
	<li><a href="news/archives/index.html">News Archives</a></li>
	</ul>
</li>
<li class="sub"><a href="#nogo">Films</a>
	<ul>
	<li><a href="films/rendezvous/index.html"><i>A Dreamer's Rendezvous</i></a></li>
	<li><a href="films/millberg/index.html"><i>Millberg Apartments</i></a></li>

    <li><a href="films/musicvids/index.html">Music Videos</a></li>
    <li><a href="films/upcoming/index.html">Upcoming Projects</a></li>
	</ul>
</li>
<li class="sub"><a href="#nogo">Links</a>
	<ul>
    <li><a href="http://www.mooseheadfilms.com">Moosehead Studios</a></li>
	<li class="sub"><a href="#nogo">Purdue</a>

    <ul>
	<li><a href="http://www.purdue.edu">University Home Page</a></li>
	<li><a href="http://www.cla.purdue.edu/film-studies/">Film Studies Program</a></li>
    <li><a href="http://purduefvsnewsletter.blogspot.com/">FVS Newsletter</a></li>
	</ul>
    </li>
	<li><a href="http://www.imdb.com">Internet Movie Database</a></li>

	</ul>
</li>
<li class="sub"><a href="#nogo">About Us</a>
	<ul>
	<li><a href="about/mindwall/index.html">About MindWall Pictures</a></li>
	<li><a href="about/awards/index.html">Awards & Recognition</a></li>
    <li><a href="about/crewbio/index.html">Crew Biography</a></li>

	</ul>
</li>
<li class="sub"><a href="#nogo">Contact Us</a>
	<ul>
	<li><a href="contact/mindwall/index.html">Contact MindWall</a></li>
	<li><a href="contact/crew/index.html">Contact film crew</a></li>
	</ul>
</li>
</ul>

</div>

It has been altered (by myself, the n00b) from the original code found at CSSplay: http://www.cssplay.co.uk/menus/flyout_4level.html

It's bugging the crap out of me, and the guy wants the site done as early as next week. This is the one thing holding me back, since people...actually...use IE. -_- Poor souls.

Any help would be greatly appreciated! Thanks.

More Dropdown / Flyout Menu Fun

Similar Tutorials

Hi there, I'm working my way through html, css and web design at the moment, and looking at drop down menus.

Currently I'm looking at css only menus, I haven't delved into javascript yet.

So I I've got a few questions regarding what I've currently got:

html4strict Code:
Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello</title> <link type="text/css" rel="stylesheet" media="screen" href="default.css" /> </head> <body> <div id="navbar"> <ul> <li><a href="#">Main Page</a></li> <li><a href="#">About</a></li> <li><a class="dropmenu"><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Dreamweaver</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </a></li> <li><a class="dropmenu"><a href="#">Articles</a> <ul> <li><a href="#">3 column magic</a></li> <li><a href="#">Site layouts</a></li> <li><a href="#">Creating Navbars</a></li> </ul> </a></li> <li><a href="#">Links</a></li> </ul> </div> </body> </html>

  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml">


 <head>


 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


 <title>Hello</title>


 <link type="text/css" rel="stylesheet" media="screen" href="default.css" />


 </head>


  


 <body>


  


 <div id="navbar">


 <ul>


     <li><a href="#">Main Page</a></li>


     <li><a href="#">About</a></li>


     <li><a class="dropmenu"><a href="#">Tutorials</a>


         <ul>


             <li><a href="#">Photoshop</a></li>


             <li><a href="#">Dreamweaver</a></li>


             <li><a href="#">HTML</a></li>


             <li><a href="#">CSS</a></li>


         </ul>


     </a></li>


     <li><a class="dropmenu"><a href="#">Articles</a>


         <ul>


             <li><a href="#">3 column magic</a></li>


             <li><a href="#">Site layouts</a></li>


             <li><a href="#">Creating Navbars</a></li>


         </ul>


     </a></li>


     <li><a href="#">Links</a></li>


 </ul>


 </div>


  


 </body>


 </html>

css Code:
Original - css Code @charset "utf-8"; /* CSS Document */ #navbar ul { padding: 0; margin: 0; list-style: none; background-color: #3F9; width: 120px; } #navbar li { position: relative; } #navbar li li { position: static; } #navbar ul ul { background-color: #7B5; top: 0; left: 120px; display: none; position: absolute; } #navbar a { text-decoration: none; text-align: center; display: block; padding: 5px 10px; } #navbar a.dropmenu { padding: 0; margin: 0; border: none; display: block; } #navbar li:hover ul, #navbar a.dropmenu:hover ul { display: block; } #navbar a:hover, #navbar li:hover { color: #000; background-color: #3CF; } #navbar li:hover li:hover { background-color: #F04; }

  

 @charset "utf-8";


 /* CSS Document */


  


 #navbar ul {


     padding:                0;


     margin:     0;


     list-style:    none;


     background-color:      #3F9;


     width:          120px;


 }


  


 #navbar li {


     position:            relative;


 }


  


 #navbar li li {


     position:            static;


 }


  


 #navbar ul ul {


     background-color:      #7B5;


     top:                    0;


     left:               120px;


     display:                none;


     position:            absolute;


 }


  


 #navbar a {


     text-decoration:        none;


     text-align:    center;


     display:                block;


     padding:                5px 10px;


 }


  


 #navbar a.dropmenu {


     padding:                0;


     margin:     0;


     border:     none;


     display:                block;


 }


  


 #navbar li:hover ul, #navbar a.dropmenu:hover ul {


     display:                block;


 }


  


 #navbar a:hover, #navbar li:hover {


     color:          #000;


     background-color:      #3CF;


 }


  


 #navbar li:hover li:hover {


     background-color:      #F04;


 }

So its currently a vertical flyout menu, I'll be looking at horizontal drop down ones soon.

Regarding the last css rule, I was just experimenting with presentation and was wondering if I could make the second level of menus have a different hover background colour than that of the initial menu. Is it just something I've got wrong with the selector (#navbar li:hover li:hover)?

The 2nd, more puzzling thing, is that you can see in the first menu, only the text comes up as a hyperlink (or clickable). In the second level menus, the whole area of the li (being an a element displayed in block mode) is clickable. I am pretty sure this is a result of setting the position property of the the li elements to relative. I have set the li elements to static (default) in the second menu, and as noted, they work fine (or more desirably). Why does changing the position property of the li to relative suddenly stop it from being clickable? The relative positioning is needed to correctly position the second level uls (menus), unless there is another way to do that. BTW Currently looking at it with ie7 at the moment.
What's going on here?

Lastly, I was hoping my a.dropmenu elements would let ie6 display the menu; sadly this doesn't seem to be happening. Again, any ideas what's gone wrong?

Div In Table In Ie Css Flyout Menu

Similar Tutorials

the following code works in opera and i think mozilla, but in ie only the top menu flies-out. the other two (a div in a table, and a table in a div) don't work. Any idea how to amend the css so they do work. I have tried setting the z-index to various things, so i dont think that's it.

...waiting to fly

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
	
<!-- 	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 --><HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout2.css" />

<!--[if lte IE 6]>
<style>
.nav-head ul li a.hide, .nav-head ul li a:visited.hide {display:none;}
.nav-head ul li a:hover ul li a.hide {display:none;}

.nav-head ul li a:hover {color:#fcf; background:#36f;}
.nav-head ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;z-index:99;overflow:visible;}
.nav-head ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.nav-head ul li a:hover ul li a {display:fixed; background:#22e; color:#000;}
.nav-head ul li a:hover ul li a ul {visibility:hidden;}
.nav-head ul li a:hover ul li a:hover {background:#cc0; color:#0a0;}
.nav-head ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#955;}
</style>
<![endif]-->
</HEAD>

<BODY>

From code at <A HREF="http://www.cssplay.co.uk/menus/flyoutt.html">this site</A><BR>
<div class="nav-head">

			 <ul>
			  <li><a class="hide" href="../menu/index.html">DEMOS</a>

			  <!--[if lte IE 6]>
			  <a href="../menu/index.html">DEMOS
			  <table><tr><td>
			  <![endif]-->

			   <ul>
				<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
				<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

				<!--[if lte IE 6]>
				<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
				<table><tr><td>
				<![endif]-->

				 <ul>
				  <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
				 </ul>

				<!--[if lte IE 6]>
				</td></tr></table>
				</a>
				<![endif]-->

				</li>
				<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
				<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
			   </ul>

			   <!--[if lte IE 6]>
			   </td></tr></table>
			   </a>
			   <![endif]-->

			  </li>

			  <!--[if lte IE 6]>
			  </td></tr></table>
			  </a>
			  <![endif]-->

			  </li>
			 </ul>

</div>

<!-- end 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->

<TABLE  width='30%' bgcolor='red'>
<TR>
	<TD>
	
				<div class="nav-head">

			 <ul>
			  <li><a class="hide" href="../menu/index.html">DEMOS</a>

			  <!--[if lte IE 6]>
			  <a href="../menu/index.html">DEMOS
			  <table><tr><td>
			  <![endif]-->

			   <ul>
				<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
				<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

				<!--[if lte IE 6]>
				<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
				<table><tr><td>
				<![endif]-->

				 <ul>
				  <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
				 </ul>

				<!--[if lte IE 6]>
				</td></tr></table>
				</a>
				<![endif]-->

				</li>
				<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
				<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
			   </ul>

			   <!--[if lte IE 6]>
			   </td></tr></table>
			   </a>
			   <![endif]-->

			  </li>

			  <!--[if lte IE 6]>
			  </td></tr></table>
			  </a>
			  <![endif]-->

			  </li>
			 </ul>

			</div>

</TD>
</TR>
</TABLE>



<!-- end 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->

				<div class="nav-head">

<TABLE bgcolor='yellow' width='250%' height='250%'>
<TR>
	<TD>
	

			 <ul>
			  <li><a class="hide" href="../menu/index.html">DEMOS</a>

			  <!--[if lte IE 6]>
			  <a href="../menu/index.html">DEMOS
			  <table><tr><td>
			  <![endif]-->

			   <ul>
				<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
				<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

				<!--[if lte IE 6]>
				<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
				<table><tr><td>
				<![endif]-->

				 <ul>
				  <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
				 </ul>

				<!--[if lte IE 6]>
				</td></tr></table>
				</a>
				<![endif]-->

				</li>
				<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
				<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
			   </ul>

			   <!--[if lte IE 6]>
			   </td></tr></table>
			   </a>
			   <![endif]-->

			  </li>

			  <!--[if lte IE 6]>
			  </td></tr></table>
			  </a>
			  <![endif]-->

			  </li>
			 </ul>


</TD>
</TR>
</TABLE>
			</div>

</BODY>
</HTML>

Css Flyout Menu Slow Down The Display

Similar Tutorials

I was wondering if anyone knows of any tutorials or resources for creating a menu system using css.

The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two?

How Can I Integrate A Dropdown Flyout Menu Into Pre-existing Images?

Similar Tutorials

Hi, I am hoping someone can help me please.

I am looking for some code (CSS, PHP or otherwise) to be able to create a drop down menu (with flyout) on mouseover of some pre-existing pictures. I have tried to take some codes which "sort of" do what I need but I'm unable to modify them to do what I need them to. It seems like the varying widths of the PNGs is a sticking point.

At the minute I have a navigation bar consisting of 5 PNGs of same height but different widths. I had intended it to work so that when you click on these top links you are given a page for that section, and along the top of that page are "sub links". However, I have changed my mind and would like to keep the current images, but on rollover have a drop down menu appear with the different "sub links" instead of having them on the top of each page.

For example I have a PNG which says "About Clan Wars". I would like a mouseover to show a Dropdown with flyout like:

>What Is Clan Wars?
>What are the rules
----> D Class Rules
----> C Class Rules
>Clan Wars 1
----> Fight Card
----> Pictures
----> Videos
>Clan Wars 2
----> Fight Card
----> Pictures
----> Videos

I hope that makes sense to whoever is reading.

Thank you
Sean

Odd Shaped Vertical Rollover Nav Menu Problem

Similar Tutorials

i have a vertical rollover menu which has odd shaped boxes, i'd like these to rollover without hiding those parts of the image that protrude.

[IMG](URL address blocked: See forum rules)[/IMG]

basically they have to butt up underneath each other, but not loose the outside top edges on the rollover state. i also want the text aligned right, but have a negative indent of 10 or so pixels. you'll see what I mean upon viewing the example.
thanks in advance!

current CSS;

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: right;
position: relative;
}

ul a {
display: block;
width: 141px;
height: 44px;
line-height: 58px;
text-decoration: none;
background: url(../images/gif/menuOverA.gif) no-repeat left;
}

#home #menu .home a,
#about #menu .about a,
#choose #menu .choose a,
#services #menu .services a,
#health #menu .health a,
#testimonials #menu .testimonials a,
#contact #menu .contact a {
background: url(../images/gif/menuOverA.gif) no-repeat right;
cursor: default;
color: White;
}

#menu a:hover {
background: url(../images/gif/menuOverA.gif) no-repeat right;
color: White;
}

#about #menu .about li {
background-color: Aqua;
}
and html;

<div id="menu">
<ul>
<li class="home"><a href="index.html">HOME</a></li>
<li class="about"><a href="aboutUs.html">ABOUT US</a></li>
<li class="choose"><a href="whyChoose.html">WHY CHOOSE US</a></li>
<li class="services"><a href="services.html">SERVICES</a></li>
<li class="health"><a href="healthSafety.html">HEALTH & SAFETY</a></li>
<li class="testimonials"><a href="testimonials.html">TESTIMONIALS</a></li>
<li class="contact"><a href="contactUs.html">CONTACT US</a></li>
</ul>
</div>

Problem With Flyout In Both Firefox And Ie

Similar Tutorials

I would first like to start out by stating that I hope I put this in the right forum. If it is a problem with my html, then obviously I am trying to fix the wrong things. I also hope that I am using the proper terminology or something close enough that you can understand.

Anyway, here is my problem. I have created a website for a dog rescue group with no spare money. So they picked me to create a website. I knew nothing about how to do it so I have been teaching myself along the way. The woman in charge of the group decided that she wanted a flyout in the left navigation and tasked me with creating it.

So after a lot of research I thought I had it. Alas, I did not. That brings me to you guys.

Firefox Problems: The flyouts are not big enough. They do not expand to fix the words. It looks much like text wrapping. I can't figure this out because it works in IE When I add lists in the main portion of the page and add a third tier to it, a flyout box appears at the top of the page instead of the list. Also on the lists, clicking on a something linked, stretches a "you clicked on me" box across the entire length of the page. (sorry for a lousy description. I don't know the actual term.)
IE Problems: The colored boxes that surround the two links that have the flyouts, have an extra line of color below the link. I am not sure what is causing this. On one flyout are two links. The top one is cut off immediately after the word even though the one below it is not. It has the same problem with the third tier of lists being in a flyout at the top of the screen that Firefox has.

If this isn't the correct area of code let me know. Oh, and I validated both the XHTML and CSS.

CSS:

PHP Code:
#nav ul {
margin:10px 0 10px 5px;
padding:0 0 0 0;
background:transparent;
}

#nav li {
list-style-type: none;
        position: relative;
background:#B7D7AF;
color: #daa520;
border:1px solid #7DB26E;
text-align:left;
padding:0 0 0 0;
margin-bottom:6px;
vertical-align: bottom;
}

#nav li a {
color: #ffffff;
font-weight:bold;
text-decoration: none;
display: block;
padding:2px 0 2px 5px;
}

#nav li a:hover {
background:#ffffff;
color: #7F9BC5;
}

#nav li a:hover:after {
background:#ffffff;
color: #7F9BC5;
content: url(img/square.gif)
}

#active a
{
display: block;
color: #FFF;
background-color: #99CCFF;
width: 15.65em;
padding: .2em .8em;
text-decoration: none;
}

.navholder {
    width: 8em;
    float: left;
    display: inline;
    margin: 15px 20px 5px 20px;
}

ul a {
    display: block;
    padding: 5px 10px;
    vertical-align: bottom;
    text-align: left;
    text-decoration: none;
    color: #552;
    }

ul ul {
    position: absolute;
    left: -3000px;
    background: #fed;
    }

li:hover {background: #ddf;}

ul li:hover ul {
    left: 10em;
    top: 2px;
}

ul a:hover {text-decoration: underline;}

/* \*/ /*/
ul li ul {position: static;}
/* */

XHTML:
PHP Code:
<div class="wrapper">
<div class="navholder">
<div class="leftcontent" id="nav"> <img alt="bg image" src="img/left_bg_top.gif" />
  <ul>
    <li id="active"><a href="index.html">Home</a></li>
      <li><a href="about_us.html">About Us</a></li>
      <li><a href="our_team.html">The Team</a></li>
      <li style="z-index: 10;"><a href="adoption_process.html">Adoption Process</a>
    <ul>
        <li><a href="our_dogs.html">Our Dogs</a></li>
        <li><a href="special_needs_dogs.html">Special Needs Dogs</a></li>
    </ul>
     </li>
      <li style="z-index: 9;"><a href="how_to_help.html">How To Help Us</a>
    <ul>
        <li><a href="how_to_help_volunteer.html">Volunteer</a></li>
        <li><a href="how_to_help_foster.html">Foster</a></li>
        <li><a href="how_to_help_other.html">Other Ways To Help</a></li>
    </ul>
     </li>
      <li><a href="helpful_information.html">Helpful Information</a></li>
      <li><a href="contact_us.html">Contact Us</a></li>
  </ul>

I have screenshots I may be able to post later, in case I am not explaining the problem correctly or so you can see what it looks like on my computer. I am new so I am restricted until 5 posts. I am not sure if you can look on my homepage in my profile (which is the same one I am talking about here). It is test.html and doctors_office.css

Any help would be great. If someone knows and easier way of do this would (if I took the long/hard way), that would be great, also. Thanks in advance from someone new at this.

Vertical Drop-down Menu - Sub-menu's Don't Appear Long Enough (time Not Length)

Similar Tutorials

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; }
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; }
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; }
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; }
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; }

PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul>

<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

Vertical Sub Menu Bar

Similar Tutorials

I have a vertical menu with a sub menu. To clarify the sub menu, there is a red vertical bar. It has a problem with IE 7 - when hovering over the links, the bar goes away and comes back. This is pretty hard to explain, so here is one of the webpages with this problem: http://030c1db.netsolvps.com/business-solutions.php (we are using a temp hosting server until it is finished - thus the odd domain name). If you look on the left, under the "In this section" you will see the vertical red bar. (the problem is only in IE7). Here is my css and code:
CSS:
Code:

.redbar {
	background-image: url(/images/NavSubBar.jpg);
	background-repeat: repeat-y;
	background-position: 26px;
}
#wrapper #container #content #content_inner #leftnav_i ul #leftnav_i_sub a {
	background:none;
	display: block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 11px;
	margin-left:25px;
	margin-top:-6px;	
}

Code:

<ul>
<div class="redbar">
<!--........Main Links......  --> 
<li div id="leftnav_i_sub"><a href="#">Main Menu 1</a></li>
<li div id="leftnav_i_sub"><a href="#">Main Menu 2</a></li>
</div>
</ul>
 <div class="clear"></div>
<!--........Sub links......  --> 
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<!--........Main Links Continued......  --> 
<li div id="leftnav_i_sub"><a href="#">Main Menu 3</a></li>
<li div id="leftnav_i_sub"><a href="#">Main Menu 4</a></li>
</ul>

Need Help With Css Vertical Menu

Similar Tutorials

If you look at
Lakelandedc.com you notice the menu is very weird when trying to go from each link to the other links... how can i fix the menu so it is easier to navigate?

Code:

 /* CSS Document */

#menu
{
text-align:left;
width:155px;
background-color:#084D9C;
margin:0;
padding:0;
}

#menu ul
{
list-style:none;
margin:0;
padding:0;
}

#menu a, #menu h2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display:block;
border-width:1px;
border-style:solid;
border-top:solid 2px;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 3px;
}

#menu h2
{
color:#fff;
background:#BA5D92;
text-transform:uppercase;
}

#menu a
{
color:#FFF;

text-decoration:none;
}

#menu ul a:hover
{
color:#fff;
background-color:#091F51;
text-decoration:none;
}


#menu ul
{
position:relative;

}


#menu ul ul 
{
position:relative;
top:0;
left:10%;
width:100%;
}

s#menu a:hover {
}

.submenu 
{
background-color:#9A1F61;
color:#fff;
}

div#menu ul ul,
div#menu ul ul li:hover ul ul
{
display:none;
}



div#menu ul:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Css Vertical Menu Doesn't Like Div Next To It Ie7

Similar Tutorials

Long time reader, first time poster.

I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser.

Here's the issue:
The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor?

Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before.

Here's the markup and css...

index.asp
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)"> 
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
	<title>Intranet</title>

	<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
	<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
	<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
   <script type="text/javascript" src="/calendar/calendar.js"></script>
	<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
	<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
	<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>

<body>


<div id="topbar">
	<!--#include virtual="/inc/toolbar.asp" -->
</div>

<div id="leftbox">
	<!--#include virtual="/inc/menu.asp" -->
</div>

<div id="rightbox">
	<!--#include virtual="/inc/rightbox.asp" -->	
</div>

<div id="middlebox">
<h1>&nbsp;Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>


</body>
</html>

Here's the menu.asp include...
Code:

		 <ul id="nav">
	      <li><a href='/departments/reports/index.asp'>Reports</a>
	      	<ul>
	          <li><a href=''>EOD<span>End of Day Reports</span></a></li>
	          <li><a href=''>EOM<span>End of Month</span></a></li>
	          <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li>
	          <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li>
	          <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li>
	          <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li>
	          <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li>
	         </ul>
	      </li>		
		  <li>
		  	<a href='/index.asp'>Home</a>
		  </li>
		</ul>

and here's the css

Code:

body {background: #fff;	font-size: 62.5%;	color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #099;
	z-index: 1;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #006;
	background: #ccc;
	padding: 5px;
	border: 1px solid #006;
	border-bottom: 0;
	}

ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

/* Begin Tool Tip Span */
		 
span {
display: none;
}
				
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
		  }

/* End Tool Tip Span */

/*******************************************************************************
                       Positioning rules
*******************************************************************************/

div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}

div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}


div#topbar	{
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}


div#search	{
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}

Your help and advice is most welcome and appreciated.
Mark

Vertical Drop Down Menu

Similar Tutorials

Hi,
i'm tryin to make a vertical drop down menu for the left side of the menu shown here

i was using the 'Suckerfish' tutorial as seen here,
but i'm not exactly sure what is needed to make it a vertical style as opposed to a horizontal. I had the horizontal one functioning properly, but that's it.
i was originally gonna go with the dhtml style drop down, but it seemed awful chunky.

thanks

Css Vertical Menu, Need Advanced Help In Ie7

Similar Tutorials

html code:

Code:

<div id="sidebar">
	<h2>South Winds Park Info</h2>
		<ul>
			<li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li>
			<li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li>
			<li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li>
			<li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li>
			<li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li>
		</ul>
		
	<h2>South Winds Resources</h2>
		<ul>
			<li><a href="calendar" title="Calendar">Calendar</a></li>
			<li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a>
				<ul>
					<li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li>
					<li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li>
					<li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li>
				</ul>
			</li>
			<li><a href="resources/special-events" title="Special Events">Special Events</a></li>
			<li><a href="resources/maintenance" title="Maintenance">Maintenance</a>
				<ul>
					<li><a href="resources/maintenance/fees" title="Fees">Fees</a></li>
					<li><a href="resources/maintenance/trash" title="Trash">Trash</a></li>
				</ul>
			</li>
			<li><a href="resources/faq" title="FAQ">FAQ</a></li>
		</ul>
</div>

CSS Code:

Code:

#sidebar ul{
	margin:10px 0 30px 0; padding: 0;
	text-align:right;
}
#sidebar li a, #nav li {
	display:block;
}
#sidebar li {
 list-style: none;
 position: relative;
}
#sidebar li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
	background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

/* Submenu */
.hasChildren {
	position: absolute;
	width: 5px; height: 5px;
	background: black;
	right : 0;
	bottom: 0;
}
#sidebar li ul {
 display: none;
 position: absolute;
 left: 100%;
 top: 0px;
 padding: 0; margin: 0;
 z-index:100;
}
#sidebar li:hover > ul {
 display: block;
}
#sidebar li ul li, #nav li ul li a {
 float: none;
  z-index:1000;
}
#sidebar li ul li {
 _display: inline; /* for IE6 */
}
#sidebar li ul li a {
 width: 150px;
 display: block;
	background-color:#2c9091;
	
}

This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

I have searched the internet for a solution:

using csshover.htc (doesn't work)

The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed.

The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index.

I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser.

What else could it be? Since the code should work. What else around this menu could be my problem?

Thank you so much for your help (ready to pull my hair out)

Disappearing Vertical Menu Pop Out.

Similar Tutorials

Hi... I have a big problem with FireFox, and especially Safari...

http://www.laventanaband.com/Music%20Samples.htm

When you roll over a pop out menu item (like "music and pics") these problems occur:

In FireFox... if you roll past the edge of the frame, the menu item disappears.

In Safari... the pop up menu section disappears below the content menu (!).

I this doesn't happen on the main page because the content area does not use overflow:auto; .... it uses overflow:hidden;

Somehow the use of that cause those problems...

Here is my css doc.

Any ideas?

Thanks in advance!

Regards,
-Max Dykstra

Vertical Drop Down Menu In Ie 7 And 6

Similar Tutorials

I've followed a tutorial before in a book called Stylin' with CSS to create a CSS based horizontal drop down menu. Although not in the book, the code to create the equivalent vertical version was supplied. I've altered it to make it more like my horizontal version and it works in Firefox perfectly. In IE 7 and 6 however it does not.

On the second level, a transparent 'top padding' appears, but it's not padding, or a margin.

The code for the whole page is: (by the way this is my first post so I'm sorry if I used the wrong tool!)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {font:1em verdana, arial, sans-serif; behavior:url(csshover.htc);}

* {margin:0; padding:0;}

div#listmenu {float:left; font-size:.8em; background: #777; margin:20px;}

div#listmenu ul {margin:0; width:10em;}

div#listmenu ul li {position:relative; list-style-type:none; background: #AAA; border:1px solid #333; border-

top:none; font-weight:bold;}

div#listmenu ul li:first-child {border-top:1px solid #333;}

div#listmenu ul li:hover {background: #555;}

div#listmenu a {display:block; padding-left:6px; text-decoration:none; color:#666;}

div#listmenu a:hover {color:#EEE;}

* html div#listmenu ul {float:left; border-top:1px solid #333;}

div#listmenu ul li ul {margin:0 0 0 10em; position:absolute; width:13em; left:-2px; display:none; top:-1px;}

div#listmenu ul li ul li {width:100%; border:1px solid #333; border-top:none; background:#BBB; font-weight:normal;}

div#listmenu ul li ul li:first-child {border-top:1px solid #333;}

div#listmenu ul li ul li:hover {background:#999;}

div#listmenu ul li:hover ul, div#listmenu ul li ul:hover {display:block;}

div#listmenu ul li ul li ul {visibility:hidden; top:-1px; left:3em;}

div#listmenu ul li ul li:hover ul {visibility:visible;}
</style>
</head>
<body>
<div id="listmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What's On</a></li>
<li><a href="#">The DYJA</a>
	<ul>
	<li><a href="#">About DYJA</a></li>
	<li><a href="#">The Jazz Centre</a></li>
	<li><a href="#">The Ensembles</a>
		<ul>
		<li><a href="#">Youth Stageband</a></li>
		<li><a href="#">Youth Swing Orchestra</a></li>
		<li><a href="#">Youth Jazz Orchestra</a></li>
		<li><a href="#">Jazz Orchestra</a></li>
		</ul>
	</li>
	</ul>
</li>
<li><a href="#">Exchanges</a>
	<ul>
	<li><a href="#">Herten (Germany)</a></li>
	<li><a href="#">Limonest (France)</a></li>
	</ul>
</li>
<li><a href="#">Recordings</a>
	<ul>
	<li><a href="#">Discography</a></li>
	<li><a href="#">Ordering Information</a></li>
	</ul>
</li>
</ul>
</div>
</body>
</html>

I can't understand why the code works in Firefox, but then the spaces appear in IE. I've uploaded it to my site as well at http://www.wattersisere.co.uk/devshed_vertical.html

Thanks in advance for any help.

Making A Menu Horizontal From Vertical

Similar Tutorials

We are redesigning and I have a CSS menu I like that runs vertically. I need a version that would also work running horizontal, with the drop downs underneath. Is this possible by tweaking my existing code? I got the code I am using from alistapart and I am not really too familiar with it. You can see it here http://www.caribbean-on-line.com/tables.html
Thanks -
Anthony

Change Vertical To Horizontal Menu

Similar Tutorials

hi all,

need help to change this from vertical to horizontal menu.

code:
<html>

<head>
<title>Test</title>

<script language="JavaScript" type="text/javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

</script>

<style type="text/css">

body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: red; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: green; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>

</head>

<body>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>

</ul>
</body>
</html>

any help would be appreciated! Thanks!!

Searching For A Special Type Of Vertical Menu..

Similar Tutorials

hi,
tried searching for a vertical menu that opens sub menu immediatley below it (and not to the left side as a layer) but none
of the publicaly available menus do it. The menu items on the main level also have a specific icon for each of them. can you say how to do this menu?. if somebody has already made this menu and is publically available that would be nice too.
thank you