CSS - Fun Multi-level Context Menu

I'm trying to add an extra level to a pop-out menu but can't get the third level to hide and display. The jscript function is suckerfish the css is a little here a little there...

CSS:

Code:

<style type="text/css"> 

  /* ==== STYLES FOR MAIN PART OF THE MENU ==== */
  #menu {
    font-family: Verdana, Arial, sans-serif;
    font-size: 100%;
     width: 100px;
      padding: 0px;
       margin: 0px;
      display:block;
  }

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

  #menu li ul ul { 
      margin: 0 0 0 0em; 
}

  #menu li {
        float:left;
         width:50px;
         position:relative;
        margin: 0px;
        padding: 0px;
  }

  #menu a {
      width:100px;
       font-size: 80%;
       color:#666666;
        text-decoration: none;
         border-bottom: 1px dashed #C39C4E;
          padding: 5px 0px 2px 4px;
        display: block;
  }

  #menu a:hover, #menu a:focus {
      color: #000000;
       background-color: #AAA;
  }




      /* === STYLES FOR THE MAIN MENU (LI's) === */
         .mainitems{
                display:block;
         }

  /* === STYLES FOR THE POP OUT MENUS === */
  .popouts{
        display: none;
         width: 6em;
     position: absolute;
      top:0px;
      left: 100%;
        background-color: #EEFFCC;
  }

  .popouts li{
      position:relative;
        width: 100%;
  }

  .popouts li a{
      display: block;
       width: 100%;
     text-indent: 3px;
  }


  .popouts li a:hover{
     background-color: yellow;
     color: black;
  }


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

I've tried a couple of different things as such:

Code:

 /* === STYLES FOR THE POP OUT MENUS === */
  .popouts{
        display: none;
         width: 6em;
     position: absolute;
      top:0px;
      left: 100%;
        background-color: #EEFFCC;
  }

  .popouts li li{
      position:relative;
        width: 100%;
  }

  .popouts li li a{
      display: block;
       width: 100%;
     text-indent: 3px;
  }


  .popouts li li a:hover{
     background-color: yellow;
     color: black;
  }

I've tried .popouts li li ul ul{ and even tried adding a seperate class for the third level. Can some one please help me.

If you need a link to the page I'm working on, here you go. It's the last link "Links" in the menu where I'm trying to add the third level.

Thanks for any help you can offer.

John

hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he
nfl - baltimore ravens home page
and he
ge home page

Here is the code I'm using currently (would like it to be all CSS).
####

ul#mainNavigation
{
padding-left:185px;
}
ul#mainNavigation li
{
padding:0 16px;
float: left;
display:inline;
position: relative;
list-style: none;
color:White;
_width:1px;
}
ul#mainNavigation li.Seperator
{
padding:0px;
_width:1px;
}
ul#mainNavigation li.over
{
background-color:white;
}
ul#mainNavigation li.over a
{
color:Red;
}
ul#mainNavigation li a
{
color:White;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
display:block;
}
ul#mainNavigation a:hover {
color: Red;
}
ul#mainNavigation li a
{
display: block;
}
ul#mainNavigation li p
{
height:19px;
}
ul#mainNavigation li ul
{
display: none;
position: absolute;
background-color:Black;
opacity:.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
margin-left:-16px;
}
ul#mainNavigation li.over ul
{
display: block;
z-index:999;
}

ul#mainNavigation li.over ul li
{
float: none;
background:none;
border:none;
white-space:nowrap;
padding:0px;
}
ul#mainNavigation li.over ul li a
{
color: white;
padding:5px;
border-bottom:solid 1px black;
}

ul#mainNavigation li.over ul li a:hover
{
background: #3d1f6e;
color: white;
}
~~~~~~~ HTML ~~~~~~~~~~~~~~

<ul id="mainNavigation">

<li>
<p><a href="Mainlink1.html">Mainlink1</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>

<li>
<p><a href="Mainlink2.html">Mainlink2</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>
</ul>

####
Thank you, in advance!
~ lahddah

I'm having trouble writing CSS for a nav menu that drops down to four levels. I'm able to drop down to three but I'm having a tough time with the fourth level. Please help.




My CSS:


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover {
color:#3d4058;
background:#ffffff;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#3d4058;
background:#ffffff;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {
visibility:visible;
}
/* make the 4th level hidden */
.menu ul :hover ul :hover ul ul {
visibility:hidden;
}
/* make the 4th level visible */
.menu ul ul li:hover ul ul ul, .menu ul a:hover ul ul ul {
visibility:visible;
}

Hi

I thought this would be a lot easier than it has turned out! I want to add a 4th side menu level [#subnav-col]. I don't know if i'm getting the css or the html wrong but I can't get it to work - I find it difficult to know how to do the CSS+html to a 4th level. The original HTML and CSS is here - would be grateful for some help.

Many thanks

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-"><!-- InstanceBegin template="/Templates/template-content.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- InstanceBeginEditable name="meta" --> <title>General information</title> <!-- InstanceEndEditable --> <link type="text/css" href="/css/style.css" media="screen" rel="stylesheet"> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/css/ie8.css" media="screen"> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="/css/ie7.css" media="screen"> <![endif]--> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" media="screen"> <![endif]--> <link type="text/css" href="/css/print.css" media="print" rel="stylesheet"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/actions.js"></script>  <!-- InstanceBeginEditable name="extras" --><!-- InstanceEndEditable --> </head> <body> <div id="top"></div> <div id="container">   <div id="header">     <a class="accessLinks" href="#content" accesskey="[" tabindex="1">Skip to main content</a><span class="hidden"> | </span><a class="accessLinks" href="/accessibility.html" accesskey="0">Accessibility information</a> <a href="/" title="Go to home page" accesskey="1"><span class="site-title">Change change information </span><img src="/site-tools/img/header/logo.jpg" alt="" width="461" height="120" class="logo"></a><img src="/site-tools/img/header/header.jpg" alt="" width="509" height="120" class="header-bg"><a href="http://science.com" accesskey="/" title="services"><img src="img/header/header-icon-ng.jpg" width="223" height="30" alt="" class="vt-icon"></a>  </div>   <!-- end header -->    <div id="main-nav">     <!-- begin menu include -->       <ul> <li><a href="/" tabindex="2">Home</a></li><li><a href="/top/" tabindex="3">Science</a></li><li><a href="/adaptation/" tabindex="4">Physical impacts</a></li><li><a href="/carbon/" tabindex="5">reports</a></li><li><a href="/reducing/" tabindex="6">Doing our fair share</a></li><li class="current"><a href="/trading-scheme/" tabindex="7">trading</a></li></ul><div id="site-search">     <form action="http://search./search" method="get" name="siteSearch">          <fieldset>              <legend>Site search</legend>              <label for="searchBox">Search</label>              <input name="q" type="text" id="searchBox">              <input name="btnG" type="submit" value="Search" class="button">              <input type="hidden" name="site" value="Change">              <input type="hidden" name="client" value="Change">              <input type="hidden" name="proxystylesheet" value="Change">              <input type="hidden" name="output" value="xml_no_dtd">         </fieldset>      </form> </div><!-- end site-search -->  </div>   <!-- end main-nav -->   <div id="content-wrapper-2col">     <div id="subnav-col"><!-- InstanceBeginEditable name="navigation" -->             <h2><a href="/delay/participating/">Participating in the ETS</a></h2>        <ul>         <li><a href="/delay/participating/apples/">Apples</a></li>         <li><a href="/delay/participating/oranges/">Oranges</a></li>         <li><a href="/delay/participating/bananas/">Bananas</a></li>         <li><a href="/delay/participating/Cherries/">Cherries</a></li>         <li><a href="/delay/participating/grapes/">Grapes</a>              <ul>               <li><a href="/delay/participating/industry/obligation/">Obligations</a></li>               <li><a href="/delay/participating/industry/allocation/">Allocation</a>                 <ul>                   <li><a href="/delay/participating/industry/allocation/eligible-activities/">Eligible activities</a></li>                   <li><a href="/delay/participating/industry/allocation/before-applying/">Before applying</a></li>                   <li><a href="/delay/participating/industry/allocation/calculators/">Calculators</a></li>                    <li><a href="/delay/participating/industry/allocation/how-it-works/">How it works</a></li>                   <li><a href="/delay/participating/industry/allocation/faq.html">Application FAQs</a></li>                 </ul>               </li>               <li><a href="/delay/participating/industry/call-for-data/">Call for data</a></li>               <li><a href="/delay/participating/industry/faq.html">FAQs</a></li>             </ul>          </li>         <li><a href="/delay/participating/fuels/">fuels</a></li>         <li><a href="/delay/participating/synthetic/">Synthetic</a></li>         <li><a href="/delay/participating/waste/">Waste</a></li>       </ul>       <!-- InstanceEndEditable --></div>     <!-- end subnav-col -->     <div id="content-col">       <div id="breadcrumbs">         <p><span class="youarehere">You are he  </span><!-- InstanceBeginEditable name="crumbs" --><a href="/trading/"> trading</a><a href="#"></a> ><!-- InstanceEndEditable --></p>       </div>        <!-- end breadcrumbs -->       <a name="content"></a><!-- InstanceBeginEditable name="content" -->       <h1>About allocations </h1>       <p>Financial assistance to reduce  the impact of the <a href="/scheme/about/basics.html"> Some sectors by providing them with <a href="/scheme/about/emission-units.html"> Units (Us)</a>.  This compensates eligible businesses for increased energy  and fuel costs under the ETS and will help businesses make the necessary changes to reduce their pricing.</p>       <p> There are three main groups who are eligible for allocation:  </p>        <ul>         <li>firms whose activities are  intensive and who are exposed </li>         <li>fishing, and</li>         <li> forestry.  </li>       </ul>                     <!-- InstanceEndEditable --></div>     <!-- end content-col -->    </div>   <!-- end content-wrapper-2col -->   <div class="clear"></div>   <div id="footer">         <div id="-info"><a href="http://www.../" title="Visit the  website"><img src="/site-tools/img/-logo.gif" width="211" height="57" alt=" logo"></a>             </div>     <!-- end -info -->      <div id="call-tools">       <div id="call">                </div>       <!-- end call -->       <div class="clear"></div>        <div id="tools">         <ul>           <li><a href="/sitemap.html" accesskey="2">Site map</a></li>           <li><a href="/copyright.html">Copyright</a></li>           <li><a href="/disclaimer.html">Disclaimer</a></li>           <li><a href="/accessibility.html#accesskeys" accesskey="0">Accessibility</a></li>           <li><a href="/privacy-policy.html">Privacy policy</a></li>            <li><a href="/glossary.html">Glossary</a></li>           <li class="last"><a href="/contact-us.html" accesskey="9">Contact us</a></li>         </ul>       </div>       <!-- end tools -->     </div>     <!-- end call-tools -->          </div>   <!-- end footer -->   <div class="clear"></div> </div> <!-- end container --> </body> <!-- InstanceEnd --></html>

CSS #subnav-col

Code:

/* ----- subnav (left-hand) column ----- */  #subnav-col { 	float: left; 	width: 233px; 	border-top: 1px solid #cacec2; 	} 		 #subnav-col h2 { 	font-weight: normal; 	font-size: 1.4em; 	color: #234d1b; 	margin: 0; 	padding: 4px 13px 4px 13px; 	line-height: 1.2; 	background-color: #eeefeb; 	border-bottom: 1px solid #cacec2; 	} 	 #subnav-col h2 a:link,  #subnav-col h2 a:visited { 	color: #234d1b; 	text-decoration: none; 	}	 	 #subnav-col h2 a:hover { 	color: #234d1b; 	text-decoration: underline; 	}		  #subnav-col ul { 	margin: 0; 	padding: 0; 	} 	 #subnav-col ul li { 	margin: 0; 	padding: 0; 	list-style-type: none; 	font-weight: normal; 	font-size: 1.2em; 	color: #234d1b; 	}	 			 #subnav-col ul li ul li,  #subnav-col ul li ul li ul li { 	font-size: 100%; 	font-weight: normal; 	} 	 #subnav-col ul li a:link,  #subnav-col ul li a:visited { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #234d1b; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet.gif) no-repeat 0 6px; 	} 	 #subnav-col ul li a:hover { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #000; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; 	}		 	 #subnav-col ul li.current a:link,  #subnav-col ul li.current a:visited,  #subnav-col ul li.current a:hover { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #000; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet-current.gif) no-repeat 0 6px; 	} 	 #subnav-col ul li.parent a:link,  #subnav-col ul li.parent a:visited,  #subnav-col ul li.parent a:hover { 	margin: 0; 	padding: 5px 13px 4px 13px; 	color: #000; 	display: block; 	text-decoration: none; 	border-bottom: 1px solid #dcdfd7; 	background: #fff url(../img/bullet-parent.gif) no-repeat 0 6px; 	}	 	 #subnav-col ul li ul li a:link,  #subnav-col ul li ul li a:visited,  #subnav-col ul li.parent ul li a:link,  #subnav-col ul li.parent ul li a:visited { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet.gif) no-repeat 13px 6px; 	color: #234d1b; 	} 	 #subnav-col ul li ul li a:hover,  #subnav-col ul li.parent ul li a:hover { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; 	color: #000; 	} 	 #subnav-col ul li ul li.current a:link,  #subnav-col ul li ul li.current a:visited,  #subnav-col ul li ul li.current a:hover,  #subnav-col ul li.parent ul li.current a:link,  #subnav-col ul li.parent ul li.current a:visited,  #subnav-col ul li.parent ul li.current a:hover { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet-current.gif) no-repeat 13px 6px; 	color: #000; 	} 	 #subnav-col ul li ul li a:link,  #subnav-col ul li ul li a:visited,  #subnav-col ul li ul li a:hover { 	padding: 5px 13px 4px 27px; 	} 	 #subnav-col ul li ul li.parent a:link,  #subnav-col ul li ul li.parent a:visited,  #subnav-col ul li ul li.parent a:hover,  #subnav-col ul li.parent ul li.parent a:link,  #subnav-col ul li.parent ul li.parent a:visited,  #subnav-col ul li.parent ul li.parent a:hover { 	padding: 5px 13px 4px 27px; 	background: #fff url(../img/bullet-parent.gif) no-repeat 13px 6px; 	color: #000; 	}		 	 #subnav-col ul li ul li ul li a:link,  #subnav-col ul li ul li ul li a:visited,  #subnav-col ul li.parent ul li ul li a:link,  #subnav-col ul li.parent ul li ul li a:visited,  #subnav-col ul li ul li.parent ul li a:link,  #subnav-col ul li ul li.parent ul li a:visited,  #subnav-col ul li.parent ul li.parent ul li a:link,  #subnav-col ul li.parent ul li.parent ul li a:visited,  #subnav-col ul li ul li.current ul li a:link,  #subnav-col ul li ul li.current ul li a:visited { 	padding: 5px 13px 4px 40px; 	background: #fff url(../img/bullet.gif) no-repeat 27px 6px; 	color: #234d1b; 	} 	 #subnav-col ul li ul li ul li a:hover,  #subnav-col ul li.parent ul li ul li a:hover,  #subnav-col ul li ul li.parent ul li a:hover,  #subnav-col ul li.parent ul li.parent ul li a:hover { 	padding: 5px 13px 4px 40px; 	background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; 	color: #000; 	}  #current a:link,  #subnav-col ul li ul li ul li.current a:visited,  #subnav-col ul li ul li ul li.current a:hover,  #subnav-col ul li.parent ul li ul li.current a:link,  #subnav-col ul li.parent ul li ul li.current a:visited,  #subnav-col ul li.parent ul li ul li.current a:hover,  #subnav-col ul li ul li.parent ul li.current a:link,  #subnav-col ul li ul li.parent ul li.current a:visited,  #subnav-col ul li ul li.parent ul li.current a:hover,  #subnav-col ul li.parent ul li.parent ul li.current a:link,  #subnav-col ul li.parent ul li.parent ul li.current a:visited,  #subnav-col ul li.parent ul li.parent ul li.current a:hover { 	padding: 5px 13px 4px 40px; 	background: #fff url(../img/bullet-current.gif) no-repeat 27px 6px; 	color: #000; 	}		 	 /* --- blocks of content in subnav column --- */	  /* subnav column links */		  #subnav-col .related-links-box ul a:link,  #subnav-col .highlight-box p a:link,  #subnav-col .highlight-box ul a:link { 	color: #004161; 	font-weight: bold; 	text-decoration:none; 	}  #subnav-col .related-links-box ul a:visited,  #subnav-col .highlight-box p a:visited,  #subnav-col .highlight-box ul a:visited { 	color:#336781;  	font-weight: bold; 	text-decoration:none; 	} 	 #subnav-col .related-links-box ul a:hover,  #subnav-col .highlight-box p a:hover,  #subnav-col .highlight-box ul a:hover { 	color: #004161; 	font-weight: bold; 	text-decoration:underline; 	}   /* related links box - subnav column */  #subnav-col .related-links-box { 	width: 233px;  	background-color: #f6f7f5; 	margin: 20px 0 20px 0; 	padding: 0; 	border-top: 1px solid #cacec2; 	}	 	 #subnav-col .related-links-box h2,  #subnav-col .related-links-box h3,  #subnav-col .related-links-box h4,  #subnav-col .related-links-box h5,  #subnav-col .related-links-box h6 { 	font-weight: normal; 	font-size: 1.4em; 	color: #004161; 	margin: 0; 	padding: 3px 13px 4px 13px; 	line-height: 1.2; 	background-color: #eeefeb; 	border-bottom: 1px solid #cacec2; 	}	 	 #subnav-col .related-links-box h2 a:link,  #subnav-col .related-links-box h2 a:visited, #subnav-col .related-links-box h3 a:link,  #subnav-col .related-links-box h3 a:visited, #subnav-col .related-links-box h4 a:link,  #subnav-col .related-links-box h4 a:visited, #subnav-col .related-links-box h5 a:link,  #subnav-col .related-links-box h5 a:visited, #subnav-col .related-links-box h6 a:link,  #subnav-col .related-links-box h6 a:visited { 	color: #004161; 	text-decoration: none; 	}	 	 #subnav-col .related-links-box h2 a:hover,  #subnav-col .related-links-box h3 a:hover,  #subnav-col .related-links-box h4 a:hover,  #subnav-col .related-links-box h5 a:hover,  #subnav-col .related-links-box h6 a:hover { 	color: #004161; 	text-decoration: underline; 	}		 	 #subnav-col .related-links-box ul { 	margin: 11px 0 0 0; 	padding: 0 13px; 	} 	 #subnav-col .related-links-box ul li { 	font-size: 1.1em; 	margin: 0; 	padding: 0 0 12px 14px; 	line-height: 1.2; 	list-style-type: none; 	background: url(../img/bullet.gif) no-repeat 0 2px; 	font-weight: normal; 	}	 	 #subnav-col .related-links-box ul li a:link { 	padding: 0; 	border-bottom: none; 	background: none; 	} 	 #subnav-col .related-links-box ul li a:visited { 	padding: 0; 	border-bottom: none; 	background: none; 	}	 	 #subnav-col .related-links-box ul li a:hover { 	padding: 0; 	border-bottom: none; 	background: none; 	}

Hello:

I inherited a site which was designed by an SEO firm. They have a 2 level horizontal drop down menu which isn't working in Internet Explorer 6.

The website URL is http://www.chrisspencerhomes.com.
When you hover over the links Communities, Home Plans, Available Homes and Gallery; the drop down menus do not appear in IE6. The website works great in Firefox and IE7.

I attached the CSS file to this post. Can someone help me fix the CSS code so it will work on IE6?

Thank you for all your time and help.

Hey there again!

I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!!

It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem

The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!!

Here is a screen shot of my problem:


Here is my css:
PHP Code:
.navbar :hover ul.nav {
padding:0; margin:0; 
left:0; top:40px; 
width:136px; 
z-index:604;
background-color:#333333; }

.navbar :hover ul.nav li a {
display:block; 
height:24px; width:136px;}

.navbar :hover ul.nav li a:hover {background:#ad8d12;}

.navbar :hover ul.nav :hover ul.sub{
padding:0; margin:0; 
left:104px; top:-4px; 
width:200px; 
z-index:606; 
background-color:#333333;}

/* keep the 'next' level invisible by placing it off screen. */
.navbar ul.nav, 
.navbar :hover ul.nav ul.sub
{position:absolute; left:-9999px;} 






Here is my HTML code:
PHP Code:
<ul class="navbar">
    <li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="nav">
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub">
                    <li><a href="#">Link3</a></li> 
                    <li><a href="#">Link3</a></li>
                    <li><a href="#">Link3</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul> 







Thanks a million for even reading up to here

I tried to do this CSS drop down menu with 2 methods, but none of them work perfect.
The first method is this:
PHP Code:
#menu1main { /* Top drop down menu styles */
height : 31px;
display : block;
}

#menu1main a { /* Top drop down menu hover styles */
display : block;
color : #000000;
text-decoration : none; 
border : none;
background-repeat : no-repeat;
}

.menu1 .menu1list { /* Hide top drop down menu submenu */
display : none;
}

.menu1, .display { /* Top drop down menu top level styles */
float : left;
width : 110px;
text-align : center;
vertical-align : middle;
font-family : Comic Sans MS;
font-size : 10pt;
line-height : 31px;}

/* Top drop down menu submenu hover styles */
a.menu1b1lv1, a.menu1b1lv1:hover, a.menu1b1lv1:active { 
background-image : url('image/menu_banner_1.jpg');
background-position : 12px 50% ;
}

a.menu1b2lv1, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
background-image : url('image/menu_banner_2.jpg');
background-position : 12px 50% ;
}

/* Top drop down menu submenu hover styles */
a.menu1lv2, a.menu1lv2:hover, a.menu1lv2:active { 
display : block;
text-decoration : none; 
border : none;
color : #000000;
text-indent : 16px;
text-align : left;
font-size : 8pt;
line-height : 20px;
width : 130px;
}

a.menu1lv2:hover, a.menu1lv2:active { 
background-image : url('image/menu_cube_1.gif');
background-position : 0% 100% ;
background-repeat : no-repeat;
}

a.menu1lv2:hover, a.menu1lv2:active, a.menu1b1lv1:hover, a.menu1b1lv1:active, a.menu1b2lv1:hover, a.menu1b2lv1:active { 
font-weight : bold;
} 




The HTML for this is:
Code:

<div id="menu1main">

<div class="menu1" 
  onmouseover="this.className='display'"
    onmouseout="this.className='menu1'">
        <a class="menu1b1lv1" href="">Intro</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Title</a>
        <a class="menu1lv2" href="">Part 2 Title</a>
        <a class="menu1lv2" href="">Part 3 Title</a>
        </div></div>
<div class="menu1" 
  onmouseover="this.className='display'"
	  onmouseout="this.className='menu1'">
        <a class="menu1b2lv1" href="">Chapter 1</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Long Title</a>
        <a class="menu1lv2" href="">Part 2 Long Title</a>
        <a class="menu1lv2" href="">Part 3 Long Title</a>
        </div></div>
</div>

The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method:
PHP Code:
 ul.top { /* Top drop down menu styles */
    display : block;
    padding : 0;
    margin : 0;
    border : none;
    font-family : Comic Sans MS;
    font-size : 10pt;
    text-align : center;
    vertical-align : middle;
}

#topnav li.topnav0 { /* Top drop down top level menu styles */
    position : relative;
    float : left;
    background-image : url('image/menu_banner_1.jpg');
    background-position : 50% 0% ;
    background-repeat : no-repeat;
    width : 110px;
    line-height : 31px;
}

#topnav li.topnav0 a { /* Top level link styles */
    color : #000000;
    text-decoration : none;
}
     
li.topnav0 a:hover { /* Top level hover styles */
    text-decoration : none;
    font-weight : bold;
}
     
#topnav ul.topnav1 a:hover { /* Drop down hover styles */
    text-decoration : none;
    background-image : url('image/menu_cube_1.gif');
    background-position : 0 50% ;
    background-repeat : no-repeat;
}

li.topnav0 ul.topnav1 {/* Drop down box style */ 
    display : none;
    background : #FFFFFF;
    padding : 0;
    margin : 0;
    position : absolute;
    top : 100%;
    left : 0;
}

#topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */
    display : block;
    padding : 0;
    margin : 0;
    text-indent : 16px;
    text-align : left;
    font-size : 8pt;
    line-height : 20px;
    width : 250px;
}

#topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */
    display : block;
} 




And the HTML is as follow:
Code:

<div>
	     <ul class="top" id="topnav">
               <li class="topnav0"><div><a href="#">Home</a></div>
               </li>
               <li class="topnav0"><div><a href="#">Intro</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Title</a></li>
                         <li><a href="#">Part 2 Title</a></li>
                         <li><a href="#">Part 3 Title</a></li>
                    </ul>
               </li>               <li class="topnav0"><div><a href="#">Chapter 1</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Long Title</a></li>
                         <li><a href="#">Part 2 Long Title</a></li>
                         <li><a href="#">Part 3 Long Title</a></li>
                    </ul>
               </li>
          </ul>
</div>

The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up.

Any help of making either method to work is great appreciated! Thank you very much!

Hoping that this is a no-brainer to someone here!

Here is a sample of the code for my menu using suckerfish:

Code:

<ul class="menu sf-menu sf-horizontal sf-js-enabled">
  <li class="parent item3">
    <span class="separator"><span>Dealer Info</span></span>
      <ul style="display: none; visibility: hidden;">
        <li class="item13">
        <a href=""><span>About Us</span></a>
        </li>
      </ul>
  </li>
</ul>

Top-level and sub-level nav are both working great, but you will notice when you hover down to the sub-level menu items, the top-level text goes back to white, making it impossible to read...

Here is the css code for my menu:

Code:

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
	font-weight: bold;
}
.sf-menu {
	line-height:	1;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
	font-weight: bold;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left: 0;
	top: 24px; /* match top ul list item height */
	width: 127px;
	z-index: 99;
	background: url(../images/subnav-bg.png) no-repeat left bottom;
	padding: 2px 0 24px;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin: 5px 0 0 32px;
}
.sf-menu a {
	color: #FFF;
	text-decoration: none;
	display: block;
}
.sf-menu .separator {
	cursor: pointer;
	display: block;
}
.sf-menu .separator:hover {
	cursor: pointer;
	color: #000;
	text-decoration: none;
}
.sf-menu li:hover > li,
.sf-menu li:hover > a {
	color: #000;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
}
.sf-menu a:hover {
	color: #000;
	text-decoration: none;
}
.sf-menu li {
	text-align: center;
	text-transform: uppercase;
	background: url(../images/nav-bg.png);
	height: 19px;
	line-height: 19px;
	width: 122px;
	margin: 0 1px;
	font-size: 11px;
}
.sf-menu li li {
	background: none;
	font-size: 11px;
}
.sf-menu li li li {
}
.sf-menu li:hover, .sf-menu li.sfHover {
	background: url(../images/nav-bg-over.png);
}

/*
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background: url(../images/nav-bg-over.png);
}
*/
.sf-menu li li:hover, .sf-menu li li:hover a {
	background: none;
	color: #000;
}


/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

Can anyone tell me what the rule is to keep that top level text black when I hover below?

Thanks

Hi,
I am converting a wordpress theme to Farsi, which is an RTL language.
Meaning I have to convert anything that is left to right.

Everything has been great, except for the drop down menu.
It shows fine in firefox (see link below)

http://mytasvir.com/photo/gallery/24b060df15cc3b.gif

But in internet explorer, the first level is shifted to the left (see image below)

http://mytasvir.com/gallery/image/730/24b060e63235cb.gif

In the CSS part below:
Code:

 /* first level */

#pagenav li ul {
float:none;
position:absolute;
display: block;
width: 200px;
left: -999em;
margin-top: -1px;

when I change the position:absolute; to position:relative; the outcome will be as below:

http://mytasvir.com/gallery/image/730/24b060f02b67c3.gif

which is also not acceptable.
What Can i do?

I attached the part of style sheet which is related to the navigation, sorry I had to upload on rapidshare....

http://rapidshare.com/files/309492078/style.css

please help! i really need help!

Hello,

In my menu, I'm trying to center the first level of the List Items, and left justify the second level of the List Items. So the Menu will be centered and the pop-up links will be left justified. I know it's probably super simple, but for some reason, I'm missing it!

Quote:
/*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:10000;}
.qmmc .qmdividery{float:left;width:0px;}
.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:10000;}
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative;zoom:1;z-index:10000;}
.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:10000;}
.qmmc div a,
.qmmc ul a,
.qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div{visibility:hidden;position:absolute;}
.qmmc
.qmcbox{cursor:default;display:block;position:relative;z-index:10000;}
.qmmc
.qmcbox a{display:inline;}
.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}
.qmmc li {z-index:10000;}
.qmmc ul {left:-10000px;position:absolute;z-index:10000;} .qmmc,
.qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none}
.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet).

I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state.

I don't really want to post the link to the test site itself if I don't have to for client privacy.

Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work.

I don't even need the javascript, I just need it to work. I've experimented with javascript and without.

This is the code I am using:

javascript:
Code:

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.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>

HTML Markup:

Code:

<div id="nav">
	<ul id="menu">		
		<li><a href="index.php" class="home"></a></li>
		<li><a href="link" class="tour"></a></li>
		<li><a href="link" class="events"></a>
			<ul class="drop">
				<li><a href="/events/calendar">Calendar</a></li>
				<li><a href="/events">Ag Science Hall of Fame</a></li>
				<li><a href="/events/tastes">TASTES</a></li>
			</ul>
		</li>
		<li><a href="news" class="news">News</a>
			<ul class="drop">
				<li><a href="link">Legislation</a></li>
				<li><a href="news/latest-news">Latest News</a></li>
				<li><a href="/news/newsletter">Newsletter</a></li>
				<li><a href="news/in-the-media">In the Media</a></li>
			</ul>
		</li>
		<li><a href="link"></a></li>
		<li><a href="link"></a></li>
	</ul>
</div>

Menu CSS:

Code:

#nav {
position: relative;
	float:left;
	width:940px;
	height:35px;
	z-index: 9;
	background: #fff;
		}	
		
#menu, #menu ul {
position: relative;
	padding:0;
	margin:0;
	clear:both;
	float:left;
	width:455px;
	z-index: 9;
	}
	
#menu ul.drop {
	background:#520006;
/*	padding:10px;*/
	width:inherit;
	clear:both;
	float:left;
	margin-top:35px;
	z-index: 9;
	}

#menu ul.drop li {
    width: 130px;
	clear:both;
	padding: 5px;
	z-index: 9;
	}
	
#menu ul.drop li:hover {
    background: #c10101;
	z-index: 9;
	}
	
#menu ul.drop a {
	
	color:#fff;
	font-size:11px;
	text-decoration:none;
	font-weight:normal;
	clear:both;
	float:left;
	z-index: 9;
	}

	
#menu a {
	display: block;
	/*width: 10em;*/
	float:left;
	clear:both;
	width:130px;
}

#menu li {
	float: left;
	/*width: 10em;*/
}

#menu li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	z-index: 9;
}

#menu li:hover ul {
	left: auto;
}

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


/*SPRITE BACKGROUP POSITIONING*/	
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
	float:left;
	background:url('images/menu.jpg') no-repeat;
	height:35px;
	text-indent:-999999px;
	}
	
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}

#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}

#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}

#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}

#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}

#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}

ul {list-style: none;}

ok, ive had a look on the internet (google) and in this forum, and have been upable to come up with a decent example of a mutli tier drop down menu where the sub menu also has a menu

Currently I am using this code, http://www.alistapart.com/articles/dropdowns/
PHP Code:
echo "
<ul id=\"nav\">    
  <li><a href=\"#\" class=\"bodytext\">Clients</a> 
    <ul>
      <li><a href=\"http://www.commusoft.co.uk/eheating/forms/addclientcard.php\" class=\"bodytext\">New Customer</a></li>
      <li><a href=\"http://www.commusoft.co.uk/eheating/forms/addagents.php\" class=\"bodytext\">New Agent</a></li>
      <li><a href=\"http://www.commusoft.co.uk/eheating/postcodecheck.php\" class=\"bodytext\">Postcode Check</a></li>
    </ul>
  </li> 
</ul>"; 





this is the javascrip to make it work with IE
Code:

<script language="JavaScript">
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>

Code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	height: 18px;
	border-bottom: 1px solid #ccc;
}
ul li {
	position: relative;
	line-height: 16px;
}
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	float: left;
}
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border-right: 1px solid #ccc;
	border-bottom: 0;
	height: 1%;
}
li hover ul, li.over ul { 
	display: block;
}

This is a single tier drop down menu were there are titles and a sub - menu.

I was hopeing someone would point me in the direction, or show me where to begin if I want to turn this code into a multi tier drop down menu.

Also, if anyone else has used this why does a gap appear between each menu option when hovering over?

Any help would not only help me but will supply a decent example for others..

Thanks

Hi,

I'm building a page that imports two blog feeds from feedburner displaying them in separate divs. I'm a beginner at CSS and could use some help manipulating the styles of these blog feeds separately (which are linked to an external style sheet), but I don't know enough about context dependent css and selectors. I've tried researching a solution but haven't found an answer specific to what I'm doing.

I've given the divs their own IDs ("newsblog" and "newcontent"). Here's an example of some of Google's css:

div.feedBurnerFeedBlock li a:link {
font-size: 20px;
font-weight: bold;
font-color: #9F0;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
list-style-type:none;
}

I need to take that code and make it specific to one div or the other, instead of applying to both.

Any help or advice is greatly appreciated. Thanks,

Jeff

I'm trying to create a context sensitive help system so that users can click an icon and get additional information about the section of the web page they're viewing.

I want a layered div to come to the top and display this information then close upon the user clicking a button / link. I have all that working fine.

The problem I'm having is I only want one help layer to appear at a time. So if the user fails to close the currently open layer, i want to automatcially close this layer then display the next one.

Applicable CSS:
Code:

.helpText {
    position: absolute;
    top: 30px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    color: #000000;
    font-size: 13px;
    float:left;
}

.top {
    position: absolute;
    bottom: 90;
    left: 110;
    width: 100px;
    height:5em;
    background-color:#FFFF99;
    z-index:1;
    padding:.5em;
    border: 1px;
    border-style: solid;
    border-color: #000000;
}

HTML:
Code:

<DIV id="button">
  <input type="button" name="button" value="?" onclick="helpText(\'matches\');">
  <DIV id="matches" class="top" style="display:none;">
    <DIV class="close">
      <input type="button" name="button" value=" X " onclick="helpText(\'matches\');">
    </div>
    <div class="helpText">
      It works here too!
    </div>
  </DIV>
</DIV> 

javascript:
Code:

function helpText (elm) {
/*
The function below successfully alters the class ".top" to not display, the problem is it works globally.  So since two or more "helpText" divs will use this class even the one i want to display will be hidden.
*/
//    alterCssClass(".top","display","none");
    var div = document.getElementById(elm);
    if (div.style.display == "") {
        div.style.display = "none";
	} else {
        changecss("#"+elm+".top","display","");
        div.style.display = "";
	}
}

Any help would be greally appreciated.

Thanks in advance.

Hi all!

New to the forum, hopefully somebody will be able to help me out with a problem I am having!

I am currently working on a simple flat website and would like help with the layout. I know what I want, however I cant seem to get the code working

I will upload a picture outlining what I want to achieve, it would be pretty confusing to explain.

URL

Basicaly, heres the idea.

Header
Main Content Container
Footer

The footer must always be visible and stick to the bottom of the page. When displayed in higher screen resolutions, the footer is still at the bottom. That is within my ability, but I am having trouble formatting the Main Content Container. I want it to be a static height, regardless of screen size. However, if it is viewed in a lower screen resolution, the footer is going to eat into this height so I would like to get a vertical scroll bar to appear inside the Main Content Container div to accomodate for this.

I have trouble explaining what I mean please if you have the know how can you help me out? I'd really apreciate it!

Thanks in advance, hopefully I will be able to contribute to the forum in the future