CSS - Four Level Dropdown Menu

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

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

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; 	}

I have one issue left in this context menu:
www.webfletch.com/sharing
(( Make Sure You Right Click On The Page ))

The issue is in Internet Explorer, when you click on the sub-menu or one of the links in the sub-menu.

Everything works fine at that point, but when you right-click to bring up the context menu again, the sub-menu comes up showing. Because technically, the css didn't grab the mouseout (Or whatever the opposite of "hover" is.)

I attempted to fix this with javascript by placing different variations of different scripts all over the code that made the sub-menu style.display = 'none'

However, the javascript made the code permenant. Once it was executed, the sub-menu never showed back up again. I guess javascript out-trumps the "hover" attribute of CSS.

Any thoughts?

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.

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!

1. top and bottom images are collapsing, i cant get them to display correctly without filling the html with either breaks or text

2. I cant get the images submenuedivider and submenuemarker to display simultaneously when i hover the links in the list.

3. Right now my soltuion to not display the divider image below the last element in the list is through the code:
<li><a style="background-image: none;" href="x.html">SOmething</a></li>
</ul>

However, this also causes the mrker to not be seen above the list element as well, which isn't exactly what I wanted to happen, so what do I do? I'm stuck

The CSS:
Code:

.leftCol
{
	width: 190px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	float: left;
}

.leftCol body {font-size:100%; color: #FFF;}
.leftCol h1 {font-size:1.1em; font-weight:bold; color: #FFF;}
.leftCol h2 {font-size:1.0em; color: #FFF;}
.leftCol h3 {font-size:1.0em; color: #FFF;}
.leftCol p {font-size:0.875em color: #FFF;}

.submenue
{
	width: 188px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	float: left;
	background-image: url(images/submenue/submenuefiller.jpg);
	background-repeat: repeat-y;
	text-indent:25px;
}

.submenue ul   {list-style-type: none; margin: auto;}
.submenue ul a {padding-bottom: 10px; background: url(images/Submenue/submenuedivider.png); background-repeat: no-repeat; background-position: bottom; display: block; line-height: 25px; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #FFF;}
.submenue ul a:hover {background-image: url(images/Submenue/submenuemarker.jpg);}

.submenuetop
{
	width: 188px;
	hight: 54px;
	padding-top: 0px;
	padding-bottom: 0px;
	background-image: url(images/Submenue/top.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	margin: 0;
	float: left;
}

.submenuebottom
{
	width: 188px;
	hight: 60px;
	background-image: url(images/Submenue/bottom.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	margin-top: 54;
	float: left;
}

The HTML:

Code:

<div class="leftCol">
	  <div class="submenuetop"></br><h1>something</h1></div>
	  <div class="submenue">
	  <ul>
	  <h3>Listing</h3>
	  <li><a href="1.html">1</a></li>
	  <li><a href="2.html">2</a></li>
	  <li><a style="background-image: none;" href="3.html">5</a></li>
	  </br>
	  <h3>Produkt</h3>
	  <li><a href="1.html">1</a></li>
	  <li><a href="2.html">2</a></li>
	  <li><a style="background-image: none;" href="3">something</a></li>
	  </ul>
	  </div>
	  <div class="submenuebottom"></br></br></br></br></div>
	</div>

I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

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'm having a problem with a couple attributes for my CSS dropdowns.

view the page here
(both CSS and XHTML are on the same page)

specifically my .hoverBase:hover .hoverLaunch {} class
which reads as such:
Code:

.hoverBase:hover .hoverLaunch {
	display:block;
	position:absolute;
	top:15px;
	left:-3px;
	width:70px;
	border:3px solid #000000;
	text-align: center;
	z-index: 30;
}

the problem is that IE6 will not display the .hoverLaunch class like FireBird does, in fact, it does not display at all. Another awesome feature of IE6 is that the :hover i have applied on the .hoverbase does not work either. Any help is appreciated.

Thanks in advance.

Need some help with some dropdown menus.

I have been reading many of the tutorials on other sites.

I have come up with this code for my drop down menus:

Code:

.dropmenu {
   position: absolute;
   left: -1500px;
   visibility: visible;
   z-index: 101;
   float: left;
   width: 122px;

   border-width: 1px;
   border-style: solid;
   border-color: #BFBFBF;	
   background-color: #FFFFFF;
}
.dropmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.dropmenu li {
   display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
   display: block;
   width: 120px;

   padding: 2px;
   margin: 1px;
   font-family: Arial;
   font-size: 10px;
   font-weight: normal;
   text-align: center;
   text-decoration: none;

   color: #000000;
   background-color: #D4D4D4;
}
.dropmenu a:hover {
   padding: 2px;
   margin: 1px;
   font-family: Arial;
   font-size: 10px;
   font-weight: normal;
   text-align: center;
   text-decoration: none;

   color: #000000;
   background-color: #BFBFBF;
}

but no matter how much I adjust settings that I know, I cannot get the dropdowns to show up below my original buttons, they always show up to the right hand side.

Can someone here please point me in the right direction...

First I am using Dreamweaver MX2004.

I am still new to CSS, have not used it much. Still using tables (yeah i know) for the layout. Mainly because when I've tried positioning in the past, IE doesn't display it right. Layers don't seem to work for me!

What I'd like to know is: can I use CSS (the son of suckerfish dropdowns) for my drop down menu in a separate HTML file that would be saved as a library item? I'd like the nav separate so I can update it easily. Should I also use a separate CSS file that would only be associated with the nav? Is necessary to have an external css sheet, if it only applys to this nav? The nav would get dropped into a table row under the top banner. My issue is: will it get positioned right ? And will it view ok in IE??? Hope I explained this right. I fear that what I have already coded, would get messed up if I do this! But due to search engine optimization, I'd like to avoid a fully functioning javascript dropdown.

If you have a better suggestion/usage for a dropdown horizontal nav, I'd appreciate your ideas!

Thanks for the advice!

Valerie

Hi,
on my site http://www.mattmdesign.com, sometimes when you mouseover the portfolio the menu appears in the wrong spot. someone also said that it is appearing on the left side of the page everytime with mozilla 1.0
Does anyone know how I can make it appear right under the porfolio link every time?
Thanks, Matt

Hey all,

having a bit of trouble getting my drop down menu to display properly. It's modeled after the suckerfish menu, only modded a bit.

Here's the site...hover over 'machines' to see what i'm talking about (have to use FF, i haven't added the JS for IE yet).

The drop down is adopting the rollovers from the mainmenu, and I don't know what to change to make 'em different.

Here's the CSS for the menu:
Code:

#mainmenu {
width:780px;
height:41px;
margin:auto;
position:relative;
}

#mainmenu li.navigation {
width:78px;
height:41px;
float:left;
text-align:center;
background:#B8A488 url(images/mainmenu_roll.gif) no-repeat;
}

#mainmenu li.navigation a{
background:#66563D url(images/mainmenu_off.gif) no-repeat;
display:block;
text-decoration:none;
color:#F4F1E5;
height:31px;
padding-top:10px;
}

#mainmenu li.navigation a:hover {
background:transparent;
color:#66563D;
}

#mainmenu li#home {
background-image:url(images/home_roll.gif);
}

#mainmenu li#home a{
background-image:url(images/home_off.gif);
}

#mainmenu li#home a:hover {
background:transparent;
}


#mainmenu li#contact {
background-image:url(images/contact_roll.gif);
}

#mainmenu li#contact a {
background-image:url(images/mainmenu_off.gif);
}

#mainmenu li#contact a:hover {
background:transparent;
}

	/* BEGIN DROP DOWN MENU */
	
	li ul {
	  display: none;
	  position: absolute; 
	  top: 1px;
	  margin-left:-2px;
	  background-color:#B8A488;
	  border-left:1px solid #66563D;
	  border-bottom:1px solid #66563D;
	  padding:2px;
	  z-index:500;
	}
	
	* html li ul {
	top:26px;
	}
	
	/*
	li ul li {
	padding:0;
	}
	*/

	li > ul {
	top: auto;
	left: auto;
	}

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

Thanks!

Hi

I am trying to create a drop down menu on my existing design.

Code:

http://dfinnema.com/help

How would I add a drop down to Page 3 menu that looks like this:

Code:

http://dfinnema.com/help/images/dropdown_active.png

Without the menu:

Code:

http://dfinnema.com/help/images/dropdown.png

Any Ideas / Suggestions? :|