Learn VBA & Macros in 1 Week!

CSS - Css Flyout Menu Slow Down The Display

Full Excel VBA Course - Beginner to Expert

Css Flyout Menu Slow Down The Display	View Content

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?

Full Excel VBA Course - Beginner to Expert

More Dropdown / Flyout Menu Fun

Similar Tutorials

View Content

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

View Content

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>

Flyout Menu Problems...ie Of Course

Similar Tutorials

View Content

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.

Problem With Flyout Menu That Gets Hidden In Ie

Similar Tutorials

View Content

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

Vertical Flyout Menu Problem

Similar Tutorials

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

Very Weird Css Flyout Menu Problem..

Similar Tutorials

View Content

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

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

Similar Tutorials

View Content

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

Problem With Flyout In Both Firefox And Ie

Similar Tutorials

View Content

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.

Pure Css Flyout/dropdown Menus.

Similar Tutorials

View Content

Hi there.

I'm developing a website using Wordpress as the major CMS, it uses a navigation plugin called NAVT which makes dynamic navigation menus and allows you to nest some links under other links. Click here to see how it outputs the HTML. Basically it's a series of unordered lists inside other unordered lists, cluttered with various classes (none of them used by the plugin itself).

So basically I want to turn that into a pure CSS only flyout/dropdown menus, I've seen code flying around but with all those classes that NAVT applies I'm struggling to adapt it. Has anyone done something similar to this?

Cheers,

Ff Display Problem In Menu

Similar Tutorials

View Content

Hola,

I'm trying to add a menu I got from CSSplay to my site.

It's displaying dot in the upper right of each li space in FF, but it's fine in IE. The original file is fine, of course,

Anyone ever had this problem?

brizfoto dot com slash test

Menu Display Issue In Ie7

Similar Tutorials

View Content

Hey everyone,

The page below displays perfectly in both IE6 and Firefox, but in IE7 my navigation disappears and the right navigation in the header is all crunched together.

livedifference dot com slash test slash home

I'm not really a CSS guru, but I've tried clearing floats via tons of methods and adding random things, but nothing seems to work. Any help would be GREATLY appreciated, I really need to get this up and running.

Thanks,

Brad

Ie Display Problems With Dropdown Menu

Similar Tutorials

View Content

I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE.

I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code.

Here's a page with the navbar live:
http://www.skullcrow.com/community_upload.php

Here's the css being used:
Code:

/* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */

#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */

/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */

/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

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

/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}

#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}

#menu ul ul a:hover {color: #FFF;background:#06F;}

...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all):
Code:

<div id="centering_wrap">
<div id="menu">

<ul style="width:195px;">
  <li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/">Storefront</a></li>
      <li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
	</ul>
  </li>
</ul> 
  
<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/">Shirts</a></li>
      <li>Hats</li>
	  <li>Stickers</li>
	  <li>Misc Stuff</li>
	</ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/forum">Forum</a></li>
      <li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
	  <li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
	  <li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
	</ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help">&nbsp;</a>
	<ul>
	  <li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
	  <li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
	  <li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
	</ul>
  </li>
</ul>

<ul style="width:196px;">
  <li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff">&nbsp;</a></li>
</ul>

</div>
</div>

...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't:
Code:

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html

Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree.

Thanks again.

Firefox Menu Display Problem

Similar Tutorials

View Content

Alrite,

I have a dropdown menu that is fully CSS driven. The menu works fine except that the dropdown links dont work in Firefox. Once clicked the menu goes to the main heading link for the dropdown menu, instead of the dropdowns item link. However if u right click on the link and say open in new window/tab it works fine.

I have attached the files.

Thanks a lot

Nick

Moving To Em For Measurement; Menu Display Issue

Similar Tutorials

View Content

Hi all!

I have just started a not so small project converting my layouts to EM units. I have got so far and have a nav menu based on nested lists.

(This code was saved by ie and then formatted cleanly for inclusion here, so please ignore the capitals for tags and lack of quotation marks).

Quote:
<DIV id=topNav>
<UL id=nav>
<LI class=long><A class="firstParent selected" href="http://www.wellandpower.net/" alt="Diesel Generator Sets">Generator Home</A></LI>
<LI class=long><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Products</A>
<UL>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Product Range</A></LI>
<LI><A href="http://www.wellandpower.net/gallery/">Generator Image Gallery</A></LI>
<LI><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_certification">Generator Certifications</A></LI>
</UL>
</LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_services">Services</A></LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_about">About Us</A></LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_contact">Contact Us</A></LI>
<LI class=short><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_support">Support</A>
<UL>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support">Generator Support Page</A></LI>
<LI><A href="http://www.wellandpower.net/forums/" target=_blank>Diesel Generator Forums</A></LI>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support_spares">Diesel generator Spare Parts</A></LI>
<LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_links">DieselGenerator Support Links</A></LI>
</UL>
</LI>
<LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_tracking">Tracking</A></LI>
<LI class=right><A href="http://www.wellandpower.net/wpmm-online3/index.php">WPMM Home</A></LI>
</UL>
</DIV>

The nested list works perfectly when then font-size in the browser is set to medium or smaller. When it gets larger, it all seems to get bigger with no problem, except I get the menu "about us" shifting down about 0.3em or so.

I tried deleting the "about us" menu, and the same effect happened but with the next menu along.

I am 100% stummped where this extra space appears from!? Any ideas greatly appreciated.

Quote:
#topNav {font-size: 0.8em; background-color:#000066;position:relative;z-index:1000;margin:0;padding:0;height: 1.5em; }
#topNav ul {padding:0em;margin:0em;list-style:none;background-color:#000066;}
#topNav ul li {display:inline;position:relative;float:left;white-space:nowrap;}
#topNav ul li.topNavRBorder {border-right:0.05em solid #ffffff;}
#topNav ul li.short {width: 8em; border: 1px solid black;}
#topNav ul li.long {width: 11em; border: 1px solid black;}
#topNav ul li.right {float: right; width: 8em;}
#topNav ul li ul li {width: 18em; z-index: 5000;}
#topNav ul li a {z-index: 5000; border-left:0.05em solid #ffffff;padding:.3em 0.5em .3em 0.5em;height: 1.5em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;}
#topNav p{padding:.3em 0.05em .3em 0.05em;height:0.1em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;}
#topNav ul li a.firstParent {border-left:none;}
#topNav ul li a.firstChild {border-top:0.05em solid #ffffff;}
#topNav ul li a:hover {color:#99ccfb;text-decoration:none;}
#topNav ul li ul li a {border-right:0.05em solid #ffffff;border-bottom:0.05em solid #ffffff;}
#topNav li ul {position:absolute;display: none;}
#topNav li:hover ul, #topNav li.displayBlock ul {display:block;}
#topNav ul li a.selected {color:#99ccfb;}

Mouseover For Menu Display Doesn't Work

Similar Tutorials

View Content

Hi,
I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items.

onmouseover="document.all.child1.style.display='block'
onmouseout="document.all.child1.style.display='none'

When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not.

Please look at the style sheet - and web page.

Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout??????

Thanks
Vmusic

How Can I Make My Menu Items Display Evenly Spaced?

Similar Tutorials

View Content

Please Help! Urgent! Need To Display Logo And Menu On Each Page By Defaul

Similar Tutorials

View Content

Hi,

I'm new using CSS and was just handed the task of creating an external style sheet that will 'brand' the web page of a new service we are using with my company's logo and menu.

Our page has a logo on the left, with a menu bar extending to the right of it, then a graphic bannner with the company's slogan below all of it.

The requirements are for an external style sheet which will apply this to each page of the services hosted pages.

I desperately need an example of how this is done, or CAN it be done with an external style sheet (and what code needs to go into the HTML file to make it work).

Any help would be greatly appreciated. I've spent 4 days searching for an example and have come up dry, or what I did find didn't work. This is my last resort and I need to finish the project today.

Tillius

Background Hover Slow Ie6?

Similar Tutorials

View Content

I'm using <LI> to make vertical menu with image hover effect? It seems quite good and working properly in both IE and Firefox. But In IE6 hover effect comes slowly after nearly 1 seocnd. Is there any solution?
following is my css code.

Code:

#navigation { width:160px;	font:bold 14px Arial, Geneva, Helvetica, sans-serif; }
#navigation ul {list-style: none; margin: 0; padding: 0;}
#navigation ul li a {display:block;	background:url(button-menu2.png) no-repeat;	vertical-align: bottom;	font-size:12px;	font-weight:bold; text-align: left; padding-top: 6px; padding-left: 18px;	height: 20px !important; height: 20px; width: 100%;	text-decoration: none;	color: #ffffff;	}
#navigation ul li a:hover {text-decoration: none; background-position: 0px -25px; color: #fff;}

Dramatic Slow Loading With Php & Css

Similar Tutorials

View Content

Hello I have a serious problem with the speed of my website.

Try: URL

and wait........ for about 2 or 3 minutes!!!

I am using the command include() four times on this site, it includes templates from the same site.

I also use CSS in a separate file using LINK REL="" blah blah ...

And now it goes sooo slow.

Could someone tell me what could be the cause of this, or ask me what you need more to judge this problem.
I thought myself it could be the border element in CSS because an other site works fine with this.

Any help would be greatly appreciated!

Firefox Slow/delayed Hover

Similar Tutorials

View Content

Hi there,

I'm using a css navigation hover effect that's loosely based on this mark-up: http://css.maxdesign.com.au/listamatic/horizontal23.htm

This works fine in opera 8, ie and reasonably well in firefox; but there's a 1 second delay on the firefox hover. I've used this before with success. Not really understanding why/how this could be happening.

I should mention I'm using the AlphaImageLoader on an unrelated part of the page.

Anyone else have this problem? Possible solutions?

Thanks.

H.