CSS - Suckerfish Submenu Not Below Parent

Hello,
I have tried to design a vertical menu with sub-menu's popping out to the right.
I have used this onMouseOver and onMouseout events.
Here is the html for the menu
Code:

 <div id="menu">
  <ul>
    <li><a href="#">About Swamiji</a></li>
    <li id="m1" onMouseOver="showsub('m1')" onMouseOut="hidesub('m1')">
      Ashramams
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;ashramam@dowaleshwaram</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;ashramam@hyderabad</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;ashramam@vishakapatnam</a></li>
      </ul>  
    </li>
    <li><a href="#">Temples</a></li>
    <li id="m2" onMouseOver="showsub('m2')" onMouseOut="hidesub('m2')">
      Wings of Organization
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Satsang Groups</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Mathru Mandali</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Youth Wing</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Seva Samithi</a></li>
      </ul>
    </li>  
    <li><a href="#">Articles</a></li>
    <li><a href="#">Swamiji's Monthly letter</a></li>
    <li><a href="#">Photo Gallery</a></li>
    <li id="m3" onMouseOver="showsub('m3')" onMouseOut="hidesub('m3')">
      Store
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Books [in Telugu]</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Books [in English]</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Audio CD's</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Video CS's</a></li>
      </ul>
    </li>
    <li><a href="#">Swamiji's Darshan Timings</a></li>
    <li id="m4" onMouseOver="showsub('m4')" onMouseOut="hidesub('m4')">
      Giridhari [Monthly Magazine]
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Subscribe</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Read Sample Magazines</a></li>
       </ul> 
    </li>
    <li><a href="#">Swamiji's Itinerary</a></li>
    <li><a href="#">Programmes</a></li>
    <li><a href="#">Donations</a></li>
  </ul>  
  </div>
 

Here is the css for the menu
Code:

div#menu{
	background-color:#ffcccc;
	border-top:thin red solid;
	border-bottom:thin red solid;
	clear:left;
	display:block;
	width:100%;
	float:left;
	font:bold .75em helvetica;
}

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



div#menu a{
	margin:0;
	text-decoration:none;
}

div#menu li{
	border:1px #cfc solid;
	background-color:#ffcccc;
	position:relative;

}

div#menu ul * li{
	background-color:#ff6666;
}

div#menu a:hover{
	background-color:#ffffcc;
}

Here are the javascript functions for showing and hiding the sub-menu's
Code:

function showsub(elm)
{

  menumain=document.getElementById(elm);
  subm=menumain.getElementsByTagName("li");
  for (i=0;i<subm.length;i++)
  {
    subm[i].className='show';
  }

}  

function hidesub(elm)
{

  menumain=document.getElementById(elm);
  subm=menumain.getElementsByTagName("li");
  for (i=0;i<subm.length;i++)
  {
    subm[i].className='hide';
  }

}  

Here is the css only for hiding
.hide{
visibility:hidden;
display:none;
}

With this css for showing
.show{
visibility:visible;
display:block;
}
, I am getting this menu1.
With this css for showing
.show{
visibility:visible;
display:block;
position:absolute;
top:0;
width:100%;
margin:0 0 0 100%;
}
I am getting the menu as in menu2 image.
I would like the sub-menu to pop out as in menu2 image without blank space that is appearing at the bottom of the main menu item.
If I am not wrong , problem is setting the position of the sub-menu which is a css issue.
What should I do to get it right?
Thank you.

My parent menu div is absolutely positioned. What should be the position of submenu div so that it will appear exactly below the respective parent menu.

My parent menu div is
#ParentMenu {
z-index: 3;
position: absolute;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left:0px;
top: 42px;
left: 45px;
width: auto;
text-align:Center;
color:Black;
}
#SubMenu
{
color: red;
z-index: 1;
text-align:center;
border:1px solid #333333;
position:absolute;
width:10%;
float:left;
}

In this case,the sub menu appears immediate after the parent menu not below it. Please suggest what should be the position for SubMenu. Thanks.

I am attempting to put together a site with CSS navigation for the first time. Thanks to people much smarter than I, I've been able to stitch other's lessons into something almost workable.

THE PROBLEM
I have a horizontal menu with a submenu. This submenu should also display horizontally. It does in FF, but not in either IE6 or IE7. In these browsers, it displays vertically. I have tried a lot of things and finally gave up. I validated my code and was given a pass.

I've tried narrowing down the problem and have tried searching for the answer but I just can't figure it out.

If needed, you can view the problem at www.foundationfitnesscenter.com/schedule (ignore the crappy header image, it's just there to show an idea for now).

The CSS where I feel the problem must be:

Code:

#nav #schedule-sub, 
#nav #education-sub,
#nav #classes-sub {
	display:none;
	width:90%;
	}

body.classes #nav ul#classes-sub a, 
body.schedule #nav ul#schedule-sub a,
body.education #nav ul#education-sub a {
	background-image:none;
	color:#3300FF;
	font-size:100%;
	font-weight:bold;
	line-height:10px;
	margin-right:4px;
	padding:2px 10px 2px 10px;
	text-decoration:none;
	}

body.classes #nav ul#classes-sub,
body.schedule #nav ul#schedule-sub {
	display:block;
	position:absolute;	
	left:15px;
	top:95px;
	}	
body.education #nav ul#education-sub {
	display:block;
	position:absolute;	
	left:175px;
	top:95px;
	}

The HTML
Code:

<ul id="nav">
      <li class="home-list"><a href="/index.php">Home</a></li>
      <li class="classes-list"><a href="../classes/">Classes</a>
	  <ul id="classes-sub">
		<li><a href="../classes/pilates.php">Pilates</a></li>
		<li><a href="../classes/dance.php">Dance</a></li>
		<li><a href="../classes/gyrokinesis.php">Gyrokinesis</a></li>
	  </ul>
      </li>
      <li class="schedule-list"><a href="../schedule/">Schedule</a>
	   <ul id="schedule-sub">
		<li><a href="../schedule/class-schedule">View All Classes</a></li>
		<li><a href="../schedule/enroll-private.php">Enroll - Private</a></li>
		<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
	  </ul>
      </li>
      <li class="education-list"><a href="../education/">Education</a>
	  <ul id="education-sub">
		<li><a href="../education/pilates/">Pilates</a></li>
		<li><a href="../education/dance/">Dance</a></li>
		<li><a href="../education/gyrokinesis/">Gyrokinesis</a></li>
	  </ul>
      </li>
      <li class="about-list"><a href="../about/">About</a></li>
      <li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>

Please look at this page -

http://www.rodstrans.com/menu.html

When you place the mouse over "Services" you will see a nice little (imho) sub menu appear. I have it working well in IE7 & IE8 but there is a small glitch I need some help with. If you carefully place your mouse in the white space between the nav bar and the submenu the submenu disappears. I tried increasing the height of the li but unless I specify a background on the li the increased height does nothing. What I am after is I would like the submenu to be positioned about 5 pixels lower than where it is now, but this issue is preventing me from doing that. In other words, I want the submenu to be seperated from the main nav bar by about 10 pixels, but if I do that then this issue will really be a problem. Thanks. Tom

Hi ,
I followed this tutorials (http://matthewjamestaylor.com/blog/centered-dropdown-menus) and was successfully able to create a dynamic menu . At the moment the menu displays just one drop down and not multi submenus drop-downs. Can anybody tell me what can i add to implement something like ?

Tab1 Tab2
Link 1 > Link1.1
Link1.2
Link2 .

My css code is :-


body{behavior:;}
body{behavior:url(cssHoverFix.htc);}




/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #000; /* black line below menu */
width:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
font-size:90%; /* Menu text size */
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
}

/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:#ddd;
text-decoration:none;
color:#444;
font-weight:bold;
border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
color:#fff;
background:#000;
}
#centeredmenu ul li a:hover {
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:2em;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#eee;
color:#444;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#36f; /* Sub menu items background colour */
color:#fff;
float:left;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}


Html Code is :--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<html>
<LINK REL=StyleSheet HREF="nat.css" TYPE="text/css" MEDIA=screen>

<body>
<div id="centeredmenu">


<ul>
<li><a href="#">Tab one</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li class="active"><a href="#" class="active">Tab two</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five is a long link that wraps</a></li>
</ul>
</li>
<li><a href="#">Long tab three</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">Tab four</a>
<ul class="last">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
</ul>
</div>



</body>



</html>


Regards,
Umair

I am having trouble getting the widths to work right. I got this code off the site and I am not sure what all it does. There are about 4 or 5 places that you can adjust the width. Can some one check out the CSS below and let me know what all it does.

Code:

body
{
	margin:50px;
	background-color:#ffffff;
	font:13px Arial;
}

#nav, #nav ul
{
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
}

/* now lets get rid of position:relative for IE */

* #nav, * #nav ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}


#nav a
{
	width: 82px;
	display: block;
	color: black;
	text-decoration: none;
	background-color: white;
	border: 1px solid #000000;
	padding: 5px;
	font:12px verdana bold; /* N6 needs this to cascasde the font style */
	background:url(menubg.jpg) no-repeat 0px 0px;
	text-align: center; 

}

/* BMH for IE 5 */

* html #nav a
{
  width: 95px;
  w\idth: 95px;
}
	
#nav li
{
    float: left;
	width: 90px; /* width of the individual bars */
	position: relative;
		
}
	
#nav li ul
{
	position: absolute;
	left: -999em;
	width: 95px;
	
}
	
#nav li a:hover
{
	color: #FFFFFF;
	background-color: #B40820;
	background:url(menubg.jpg) no-repeat 0px -40px;
	
}

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

#nav ul
{
text-align: center;
display: block;
}

Here is the site (Test Menu) it is on currently. I want to make it centered in the table any ideas?

Pretty much I am a newbie to CSS and JS and I was hoping someone could outline the CSS a little better and let me know what it does.

Thanks
James

Great forum been looking around but haven't seen anything that answers my question. I have a menu in wordpress witha drop down sub menu. The menu has a colored bar over the links that changes colors when a link is hovered or on the current page. Problem is this. The sub menu I want to be clean, but it is showing the bar over the link when one of those pages is current.

Here is the html for the sub menu: Code:

<ul class="sub-menu">
	<li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://gellyfish.com/led/portfolio/living-rooms-family-rooms/">living rooms + family rooms</a></li>
	<li id="menu-item-536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-536"><a href="http://gellyfish.com/led/portfolio/kitchens-dining-rooms/">kitchens + dining rooms</a></li>
	<li id="menu-item-538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="http://gellyfish.com/led/portfolio/bedrooms/">bedrooms</a></li>
	<li id="menu-item-537" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-537"><a href="http://gellyfish.com/led/portfolio/bathrooms/">bathrooms</a></li>
	<li id="menu-item-535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="http://gellyfish.com/led/portfolio/before-after/">before & after</a></li>

	<li id="menu-item-542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-542"><a href="http://gellyfish.com/led/portfolio/commerical/">commerical</a></li>
</ul>

Here is the CSS that I cant get to stop placing the bar on it.... Code:

#access .current_page_item > a,
#access .current_page_ancestor > a {
color:#963300;
background-image:url("images/redbar.jpg");
background-position:top center;
background-repeat:repeat-x;
}

Here is the code I am trying to figure out how to stop the bar... Code:

#acess ul ul li.current-menu-item a{ background-image:none;}

I do want the red bar on the top menu, just not on the sub menu.
I messed with this a million ways and dont seem to be able to get rid of the bar on top.. Any help is greatly appreciated.

I'm trying to get my submenu lists to be the same width between IE and Firefox, but they aren't equal for some reason.

I'm setting the width to 8em, but it's displaying differently between the two browsers.

Here's a link to the page

Here is my css:
Code:

/*Set all elements to start out with margin:0 and padding:0*/
* {
  margin:0;
	padding:0;
}
body{
	font-family: arial,verdana,sans-serif;
	font-size: 100%;
	height:100%;
	background-color:white;
	color:black;
	behavior:url("./css/csshover.htc");
}
/* Needed to clearfix to clear out floats*/
* html .clearfix{
  height:1%;
}
/* This class is used to clear out floats properly*/
.clearfix{
  display:inline;
}
/* same as above */
.clearfix:after{
  content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
img{
	text-decoration:none;
	border:0;
}
/*Tile Bar Container*/
#titleMenu{
  position:absolute;
	height:13%;
	width:100%;
	border-bottom:1px solid #003366;
	z-index:1002;
}
#titleMenu h3{
  position:relative;
	float:left;
	margin:15px 0 0 15px;
	font-size:1.50em;
	font-style:italic;
	font-family:arial,sans-serif;
	letter-spacing:1.5px;
	word-spacing:2px;
	color:#333366;
}
/* Main Menu of image categories*/
#titleMenu ul{
  position:relative;
  margin-right:60px;
	margin-top:6px;
	z-index:1003;
}
#titleMenu li{
	position:relative;
	list-style-type:none;
	float:right;
  padding:0 35px 0 0;
	margin:0;
	z-index:1099;
}
/* Sub menu*/
#titleMenu ul li ul{
  position:absolute;
	margin:0;
	top:70px;
	left:-1px;
	width:8em;
	z-index:1000;
}
#titleMenu ul li ul li{
  width:100%;
	letter-spacing:1px;
	padding:0;
	border-left:1px solid #BBBBBB;
	border-right:1px solid #BBBBBB;
	border-bottom:1px solid #BBBBBB;
	background-color:#EEEEEE;
	z-index:1001;
}
#titleMenu ul li ul li ul{
  position:absolute;
	margin:0;
	top:-1px;
	left:8em;
	visibility:hidden;;
}
#titleMenu ul li ul li:hover{
  background-color:#FFFFFF;
}
/* Sets the first element of ul li ul li ONLY*/
.titleMenuFirstItem{
	border-top:1px solid #BBBBBB;
}
/* Style the links in the sub menu's*/
#titleMenu a{
  display:block;
	width:100%;
	font-size:.55em;
	text-decoration:none;
	color:#003366;
	padding:1px 6px;
 }
#titleMenu a:hover{
  /*none*/
}
/* Rollover functionality for dropdown menus*/
#titleMenu ul li ul{
	display:none;
}
#titleMenu ul li:hover ul{
  display:block;
}
/* Rollover functionality for popout menus*/
#titleMenu ul li ul li:hover ul{
  visibility:visible;
}
/* iFrame Container holding the iFrame*/
#iFrameContainer{
  position:absolute;
	padding:1px 0;
	top: 15%;
	height:78%;
	width:100%;
	border-top:1px solid #BBBBBB;
	border-bottom:1px solid #BBBBBB;
}
/* Container holding the footer */
#footer{
  position:absolute;
	width:100%;
	height:4%;
	bottom:0;
	border-top:1px solid #003366;
	background-color:#EEEEEE;
	font-size:.65em;
}
#footer ul{
  padding-right:5px;
}
#footer ul li{
 	list-style-type:none;
	padding:5px 20px 5px 0;
	float:right;
}
#footer a{
  text-decoration:none;
	color:#003366;
	letter-spacing:1px;
}
#footer a:hover{
	border-bottom:1px solid #003366;
}

Hello,

I am working on a website and this website got a dropdown menu and this menu works fine!
But when I want to make a submenu in the dropdown, it will not work correctly. The submenu is not placed in a new row, it is placed in the main dropdown menu.

The next picture shows the problem:
"Test" has to be a submenu from "Wie zijn we?", but it is placed just under it.

URL

I have used the next HTML-Code:

Code:

   <!-- Navigation item -->
          <ul>
             <li><a href="#">Almelo Sociaal<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="aswiezijnwe.html"target="iframe">Wie zijn we?</a>
                  <ul><li><a href="aswiezijnwe.html"target="iframe">test?</a></li></ul></li>
                  <li><a href="aswatdoenwe.html"target="iframe">Wat doen we?</a></li>
                  <li><a href="asbestuur.html"target="iframe">Organisatie</a></li>
                  <li><a href="asnieuws.html"target="iframe">Nieuws</a></li>
                  <li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
                  <li><a href="asafspraken.html"target="iframe">Afsprakenlijst</a></li>
                </ul>

And I have used the next CSS-Code:

Code:

/*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none; !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(235,235,235);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(228,22,34); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(175,175,175); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/

Can someone help me to fix the submenu in the dropdown menu? I think myself it is a problem in the CSS. Maybe something has to be added there, but I don't know what

redmeetsblue.com.au/forum-test/

I'm having a problem with our 3rd level sub-menu links in our top menu.

we need to specify a height:auto on the .moduletable_topmenu li a because I need each list item to have an easy changable name. this may mean it has 2 lines for 1 name such as the 3rd item under "Test".

Though when we have 2 or more 3rd level items the 2nd level moves with the 3rd level. Such as the 2nd item under "Test"

Can anyone think of a way to make this 2nd level list not move with the 3rd level items?

Hello, I have what I hope is an easy question. I am trying to make a horizontal navigation menu based on code I have found on the net. I got 99% of it working EXCEPT:

When sub menu text is displayed it "pushes" the main menu text to the right.

my example is located he www(dot)katieandconrad(dot)com

I have validated both my HTML and CSS, the errors that are displayed have nothing to do with this issue. However, I will be fixing the HTML error tonight. There's nothing I can do with the CSS errors.

Thank you very much for your help.

Regards,

CB

This is my first post so hello everybody!

I am trying to implement this menu and my problem arises in trying to change the submenu font color (as well as the hover color) at levels 2 and 3 of the menu.

I figured this would be as straightforward as just changing the color values in the CSS, but it doesn't seem to be responsive. Interestingly, it works for the first level. It's been driving me insane.

I can change the submenu background color, but not the font color even though there looks to be code for it.

Anyway, any help would be greatly appreciated! You can test out the menu itself from the site or take a gander at a portion of the code I'll post below. I commented on the section towards the bottom.

Cheers,
MorphVT

Code:

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height:41px;
    background:url(images/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(images/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);  <--- CHANGING THIS WORKS
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);  <--- CHANGING THIS NOTHING HAPPENS

}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);  <--- CHANGING THIS NOTHING HAPPENS

}
div#menu ul ul a:hover span {
    color: #fff;  <--- CHANGING THIS NOTHING HAPPENS

}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

Hi,

Can anyone help me. I am using a son of suckerfish dropdown menu on a joomla 1.5 site I am working on.

laminatefabricators.com

The menu is dropping down fine on all of my browsers (apple mac: safari, camino, firefox). & are fine on firefox for pc. The menus aren't displaying at all on Internet explorer.

Please help... I have wasted so much time trying to fix it/find a fix.

So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate!

I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . .

See the page in question: hire.karenjeane.com/web/site2.php

Thanks for any help!

I'm working on my first suckerfish dropdown for a site. I'm encountering two problems.

1) There is no background color on the subitems when i select the main item, making them hard to read

2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">

<style title="text/css">
#container {
	width: 562px;
	background: #F4ECD9;
	text-align: left;
	
	margin: 0 auto;
}



#nav, #nav ul {
	float: left;
	width: 562px;
	list-style: none;
	line-height: 1;
	background: EAE3A3;
	font-weight: bold;
	padding: 0;

	margin: 0 0 1em 0;
}

#nav a {
	display: inline;
	width: 10em;
	w\idth: 6em;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em 2em;
}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}

#nav li {
	float: right;
	padding: 0;
	width: 10em;
	
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 13.9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
	
	}

#nav li li {
	padding-right: 1em;
	width: 13em
	
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
	}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	
}

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

#nav li:hover, #nav li.sfhover {
	background: white;
}


</style>


<script type="text/javascript">

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

</script>


</head>

<body>

<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  
  <tr>
    <td height="20" width="562" class="leftnav">

<div id="container">

<ul id="nav">    
 
  <li><a href="#">SIDING</a></li>  
 
 <li><a href="#">GUTTERS</a></li> 
 
 
  <li><a href="#">BASEMENTS</a></li>  

<li><a href="#">WINDOWS</a>         
  <ul>
  <li><a href="#">300 Series</a></li>  
  <li><a href="#">900 Series</a></li> 
  <li><a href="#">Sliding</a></li>
  <li><a href="#">Bay and Bow</a></li>
 </ul>     
 </li>     

  
<li><a href="#">DOORS</a>         
  <ul>
  <li><a href="#">Entry</a></li>  
  <li><a href="#">Patio</a></li> 
  <li><a href="#">Garage</a></li> 
  </ul>     
</li>         
  
</ul>

</div></td>
  
    <td class="rightnav">
	
	<div id=linkstyles>   &nbsp;   <a href="#">HOME</a>   &nbsp;   <a href="#">CONTACT US</a>
	</div></td></tr>
  
  <tr>
    <td>
	
	<table width="562" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/mainimage.jpg"></td>
  </tr>
  <tr>
    <td><div align="center"><img src="images/whychoose.jpg"></div></td>
  </tr>
  <tr><td>
  
  <table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
  <tr>
    <td width="50%">REPUTATION: A proven track record with thousands of 
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained 
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality 
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained 
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with 
professionalism and respect.
</td>
    <td width="355">&nbsp;</td>
  </tr>
</table>

  
  </td></tr>
</table>

	
	</td>
	<td valign="top" width="100%"  class="mainrighttable">
	<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
  </tr>
  <tr>
    <td>
	
	<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
  <tr>
    <td>Our business has always been family owned 
and operated.  For more than 27 years, we 
have served our community with pride and 
integrity. Years ago, the best craftsmen always 
put their names on their work.
<br><br>
We still do.</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

	
	<span class="style1"></span></td>
  </tr>
  
</table>

</body>
</html>

Thanks for your help