Forums

apples

I need help with this menu. I'm very new to css. What I'm trying to do is create a horizontal menu with sub menus that are horizontal too. Able to do it with the Home tab, but whenever I try to add the horizontal sub menu's for the other items I can't get it to work...Under major pressure to get this done in the next couple of days. Can someone help me on what I'm doing wrong.

Thanks, here is the code:

<div id="navigation">
<ul class="mainMenu">
<li><a href="#" class="selectMenu">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Voice</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Assistance</a></li>
<li><a href="#">Links & News</a></li>
<li class="noBg"><a href="#">Contact</a></li>
</ul>
<a href="#" class="signup"></a>
<br class="spacer" />
<ul class="subNav">
<li class="noBg"><a href="#">Our Benefits</a></li>
<li><a href="#">What Our Future Plans</a></li>
<li><a href="#">Our Success</a></li>
<li><a href="#">Ratings</a></li>
<li><a href="#">Latest Blogs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Comments</a></li>
</ul>
<br class="spacer" />
</div>

MikeC

What CSS have you got for that?

apples

oops....here it is. I inherited this and don't know how to get it to function properly. Like I said, I know how to work with CSS just a bit :)

div#navigation-bg{
height:66px; background:url(images/navigation-bg.gif) 0 0 repeat-x;
}
div#navigation-bg div#navigation{
width:922px; margin:0 auto;
}
div#navigation-bg div#navigation ul.mainMenu{
padding:0; float:left; width:567px;
}
div#navigation-bg div#navigation ul.mainMenu li{
width:81px; float:left;
background:url(images/navigation-divider.gif) 100% 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a{
width:80px; height:33px; display:block;
line-height:33px; text-align:center;
font-weight:bold; color:#FAF0C2; font-size:11px;
}
div#navigation-bg div#navigation ul.mainMenu li a:hover{
background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a.selectMenu{
width:80px; height:33px; display:block;
line-height:33px; text-align:center;
font-weight:bold; color:#FAF0C2; font-size:11px;
background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}

/*-------------------------- DROP DOWN MENU STARTS --------------------------*/
ul.subNav{
font:normal 11px/12px Arial, Helvetica, sans-serif;
padding:4px 0 0 0;
}
ul.subNav li{
background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
height:17px; float:left; padding:6px 0 0 0;
}
ul.subNav li a{
display:block; margin:0 22px 0 20px;
color:#84915D;
}
ul.subNav li a:hover{
color:#fff;
}
/*-------------------------- DROP DOWN MENU ENDS --------------------------*/

div#navigation-bg div#navigation a.signup{
width:71px; height:28px; display:block;
background:url(images/sign-up-btn.gif) 0 0 no-repeat;
margin:2px 0 0 0; float:right;
}
div#navigation-bg div#navigation a.signup:hover{
background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;

MikeC

I'm not sure if you just didn't include it, but in the code you posted you didn't include the container, and because of the way the CSS is coded it needs to be in the correct hierarchy.

Here is my edited version of the HTML:

<div id=\"navigation-bg\">
  <div id=\"navigation\">
    <ul class=\"mainMenu\">
      <li><a href=\"#\" class=\"selectMenu\">Home</a></li>
      <li><a href=\"#\">About</a></li>
      <li><a href=\"#\">Voice</a></li>
      <li><a href=\"#\">Internet</a></li>
      <li><a href=\"#\">Assistance</a></li>
      <li><a href=\"#\">Links &amp; News</a></li>
      <li class=\"noBg\"><a href=\"#\">Contact</a></li>
    </ul>
    <a href=\"#\" class=\"signup\"></a> <br class=\"spacer\" />
    <ul class=\"subNav\">
      <li class=\"noBg\"><a href=\"#\">Our Benefits</a></li>
      <li><a href=\"#\">What Our Future Plans</a></li>
      <li><a href=\"#\">Our Success</a></li>
      <li><a href=\"#\">Ratings</a></li>
      <li><a href=\"#\">Latest Blogs</a></li>
      <li><a href=\"#\">News</a></li>
      <li><a href=\"#\">Testimonials</a></li>
      <li><a href=\"#\">Comments</a></li>
    </ul>
    <br class=\"spacer\" />
  </div>
</div>

As for the CSS, I added "list-style: none" to your unordered lists. I also added the spacer class you called in your <br> tag because it won't display properly otherwise, that's all though and it worked for me.

div#navigation-bg {
	height:66px;
	background: url(images/navigation-bg.gif) 0 0 repeat-x;
}
div#navigation-bg div#navigation {
	width:922px;
	margin:0 auto;
}
div#navigation-bg div#navigation ul.mainMenu {
	padding:0;
	float:left;
	width:567px;
	list-style: none;
}
div#navigation-bg div#navigation ul.mainMenu li {
	width:81px;
	float:left;
	background:url(images/navigation-divider.gif) 100% 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a {
	width:80px;
	height:33px;
	display:block;
	line-height:33px;
	text-align:center;
	font-weight:bold;
	color:#FAF0C2;
	font-size:11px;
}
div#navigation-bg div#navigation ul.mainMenu li a:hover {
	background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a.selectMenu {
	width:80px;
	height:33px;
	display:block;
	line-height:33px;
	text-align:center;
	font-weight:bold;
	color:#FAF0C2;
	font-size:11px;
	background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
.spacer {
	clear: both;
	overflow: auto;
}
/*-------------------------- DROP DOWN MENU STARTS --------------------------*/
ul.subNav {
	font:normal 11px/12px Arial, Helvetica, sans-serif;
	padding:4px 0 0 0;
	list-style: none;
}
ul.subNav li {
	background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
	height:17px;
	float:left;
	padding:6px 0 0 0;
}
ul.subNav li a {
	display:block;
	margin:0 22px 0 20px;
	color:#84915D;
}
ul.subNav li a:hover {
	color:#fff;
}
/*-------------------------- DROP DOWN MENU ENDS --------------------------*/

div#navigation-bg div#navigation a.signup {
	width:71px;
	height:28px;
	display:block;
	background:url(images/sign-up-btn.gif) 0 0 no-repeat;
	margin:2px 0 0 0;
	float:right;
}
div#navigation-bg div#navigation a.signup:hover {
	background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;
}

Is that what you wanted? or have I mis-understood?

apples

Nothing changed for me with the code you did :( Do you see how on Home there are submenus of Our Benefits, What Our Future Plans, etc? I need to add submenus that drop down when you hover over them like home for the other Main Menu items. For example, on About when you hover over it, a submenu will drop down with About Us, Affiliates, Newsletter, Serving Area, etc

For some dang reason, I can not get these to work....Where in the code did you add the container? I don't see it

Thanks for all of your help with us newbies. :)

MikeC

Ah I do apologise, I thought you mean you just wanted it ina horizontal list.

Might be worth checking this out:

http://www.dhtmlgoodies.com/index.html?page=menuScripts

Check out "List based DHTML menu"

And with regards to the container, the very top tag.

apples

Thanks for the link....seriously going to pull my hair out. Went and looked at and downloaded the Tab Menu. I really have no clue what I'm doing, nothing is working for me.....grrrrrr. Tried manipulating that code to the design and feel that I want and then as soon as I do that, it totally wacks the entire nav bar up. Totally brain fried. How can I beg someone to right this for me :)

MikeC

What design do you want exactly?
Can you send me a screenshot or something showing me?

I'll see if I can change the tab menu to what you want if I get time tomorrow.

apples

That would be great :)

Won't let me upload a screenshot...grrr, tells me could not upload. Tried to send you a private message but that wouldn't work either. :evil:

Hate to post my email...I've gotten lots of junk from doing that. I'll log back on in a bit and see what you suggest.

Thanks again

Written before I realized screenshot wouldn't work.
As you see from the screenshot, the submenu is there for HOME but never leaves after you move your mouse away or hover over something else. I want to add submenus for each of the Main menu items so when you hover over each one, a different submenu will appear.

Wow you would be so awesome if you can do this. I don't know what I'm doing wrong...think I get it and then I mess something else up completely.

al_m473

http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

this example of a dropdown menu is from a links of interest earlier this year on this site, take a look at it,
I am using it on a web site I have

for other examples, do a google search on "dropdown menu", there is lots of info out there

Al

apples

I'll check that site out....problem I've found on doing a google search is I haven't found one that shows exactly what I want...I want submenu to drop down horizontally not vertically.

Thanks

MikeC

http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html

That is an example of what al_m473 suggested. Is that what you want?

apples

Sort of....but I want the drop down to go horizontal not straight down. Does that make sense?

Wish I could post the screenshot...won't let me grrr. When I try,, I get this error: Could not upload attachment to ./files/938_4f99751a61d371bc1a6cce9d9e579f69.

MikeC

More like this one?

http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-tabmenu/dhtmlgoodies-tabmenu.html

apples

Yes....like that...that's the one I tried to use and manipulate but I kept doing something wrong and couldn't get it to work with what I've already got setup in my css stylesheet

MikeC

Ok Al try this:

In between your <head> tags put this:

<style type=\"text/css\">
div#navigation-bg {
   height:66px;
   background: url(images/navigation-bg.gif) 0 0 repeat-x;
}
div#navigation-bg div#navigation {
   width:922px;
   margin:0 auto;
}
div#navigation-bg div#navigation ul.menu {
   padding:0;
   float:left;
   width:567px;
   list-style: none;
}
div#navigation-bg div#navigation ul.menu li {
   width:81px;
   float:left;
   background:url(images/navigation-divider.gif) 100% 0 no-repeat;
}
div#navigation-bg div#navigation ul.menu li a {
   width:80px;
   height:33px;
   display:block;
   line-height:33px;
   text-align:center;
   font-weight:bold;
   color:#FAF0C2;
   font-size:11px;
}
div#navigation-bg div#navigation ul.menu li a:hover {
   background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
div#navigation-bg div#navigation ul.menu li a.selectMenu {
   width:80px;
   height:33px;
   display:block;
   line-height:33px;
   text-align:center;
   font-weight:bold;
   color:#FAF0C2;
   font-size:11px;
   background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
.spacer {
   clear: both;
   overflow: auto;
}
/*-------------------------- DROP DOWN MENU STARTS --------------------------*/
ul.subNav {
   font:normal 11px/12px Arial, Helvetica, sans-serif;
   padding:4px 0 0 0;
   list-style: none;
}
ul.subNav li {
   background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
   height:17px;
   float:left;
   padding:6px 0 0 0;
}
ul.subNav li a {
   display:block;
   margin:0 22px 0 20px;
   color:#84915D;
}
ul.subNav li a:hover {
   color:#fff;
}
/*-------------------------- DROP DOWN MENU ENDS --------------------------*/

div#navigation-bg div#navigation a.signup {
   width:71px;
   height:28px;
   display:block;
   background:url(images/sign-up-btn.gif) 0 0 no-repeat;
   margin:2px 0 0 0;
   float:right;
}
div#navigation-bg div#navigation a.signup:hover {
   background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;
}
	/***********************************************************************************************
	
	Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
	
	Get this and other scripts at www.dhtmlgoodies.com
	
	You can use this script freely as long as this copyright message is kept intact.
	
	***********************************************************************************************/
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin-top:0px;
					
	}
	.bodyText{
		padding-left:10px;
		padding-right:10px;
		border-top:1px solid #000000;	
	}
	.bodyText p{
		margin-top:5px;
	}
	#mainContainer{
		width:760px;
		height:600px;
		border:1px solid #000000;
		margin:0 auto;
		background-image:url('../../images/heading3.gif') #f00;
		background-repeat:no-repeat;
		padding-top:85px;			
	}
	#mainMenu{
		background-color: #FFF;	/* Background color of main menu */
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Fonts of main menu items */
		font-size:0.9em;	/* Font size of main menu items */
		border-bottom:1px solid #000000;	/* Bottom border of main menu */
		height:30px;	/* Height of main menu */
		
		position:relative;	/* Don't change this position attribute */
		
	}
	#mainMenu a{
		padding-left:5px;	/* Spaces at the left of main menu items */
		padding-right:5px;	/* Spaces at the right of main menu items */
		font-weight:bold;
		/* Don't change these two options */
		position:absolute;
		bottom:-2px;	/* Change this value to -2px if you're not using a strict doctype */
	}
	#submenu{		
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font  of sub menu items */
		background-color:#E2EBED;	/* Background color of sub menu items */
		
		width:100%;	/* Don't change this option */
		
	}	
	#submenu div{
		white-space:nowrap;	/* Don't change this option */
		
	}
	/*
	Style attributes of active menu item 
	*/
	#mainMenu .activeMenuItem{
		/* Border options */
		border-left:1px solid #000000;
		border-top:1px solid #000000;
		border-right:1px solid #000000;		
		background-color: #E2EBED;	/* Background color */
		
		cursor:pointer;	/* Cursor like a hand when the user moves the mouse over the menu item */
	}
	
	#mainMenu .activeMenuItem img{
		position:absolute;
		bottom:0px;
		right:0px;
	}
		
	/*
	Style attributes of inactive menu items
	*/
	#mainMenu .inactiveMenuItem{		
		color: #000;	/* Text color */
		cursor:pointer;	/* Cursor like a hand when the user moves the mouse over the menu item */
	}
	
	#submenu a{	
		text-decoration:none;	/* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */
		padding-left:5px;	/* Space at the left of each sub menu item */
		padding-right:5px;	/* Space at the right of each sub menu item */
		color: #000;	/* Text color */
		font-size:0.9em; 
	}
	
	#submenu a:hover{
		color: #FF0000;	/* Red color when the user moves the mouse over sub menu items */
	}
	
	</style>
	<script type=\"text/javascript\">
	/***********************************************************************************************
	
	Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
	
	Get this and other scripts at www.dhtmlgoodies.com
	
	You can use this script freely as long as this copyright message is kept intact.
	
	***********************************************************************************************/
	var menuAlignment = 'left';	// Align menu to the left or right?		
	var topMenuSpacer = 0; // Horizontal space(pixels) between the main menu items	
	var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
	var leftAlignSubItems = false; 	// left align sub items t
	
	var activeMenuItem = false;	// Don't change this option. It should initially be false
	var activeTabIndex = 0;	// Index of initial active tab	(0 = first tab) - If the value below is set to true, it will override this one.
	var rememberActiveTabByCookie = true;	// Set it to true if you want to be able to save active tab as cookie
	
	var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
	var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
	var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;
		
	/*
	These cookie functions are downloaded from 
	http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
	*/	
	function Get_Cookie(name) { 
	   var start = document.cookie.indexOf(name+\"=\"); 
	   var len = start+name.length+1; 
	   if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
	   if (start == -1) return null; 
	   var end = document.cookie.indexOf(\";\",len); 
	   if (end == -1) end = document.cookie.length; 
	   return unescape(document.cookie.substring(len,end)); 
	} 
	// This function has been slightly modified
	function Set_Cookie(name,value,expires,path,domain,secure) { 
		expires = expires * 60*60*24*1000;
		var today = new Date();
		var expires_date = new Date( today.getTime() + (expires) );
	    var cookieString = name + \"=\" +escape(value) + 
	       ( (expires) ? \";expires=\" + expires_date.toGMTString() : \"\") + 
	       ( (path) ? \";path=\" + path : \"\") + 
	       ( (domain) ? \";domain=\" + domain : \"\") + 
	       ( (secure) ? \";secure\" : \"\"); 
	    document.cookie = cookieString; 
	}	
	
	function showHide()
	{
		if(activeMenuItem){
			activeMenuItem.className = 'inactiveMenuItem'; 	
			var theId = activeMenuItem.id.replace(/[^0-9]/g,'');
			document.getElementById('submenu_'+theId).style.display='none';
			var img = activeMenuItem.getElementsByTagName('IMG');
			if(img.length>0)img[0].style.display='none';			
		}

		var img = this.getElementsByTagName('IMG');
		if(img.length>0)img[0].style.display='inline';
				
		activeMenuItem = this;		
		this.className = 'activeMenuItem';
		var theId = this.id.replace(/[^0-9]/g,'');
		document.getElementById('submenu_'+theId).style.display='block';
		

				
		if(rememberActiveTabByCookie){
			Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
		}
	}
	
	function initMenu()
	{
		var mainMenuObj = document.getElementById('mainMenu');
		var menuItems = mainMenuObj.getElementsByTagName('A');
		if(document.all){
			mainMenuObj.style.visibility = 'hidden';
			document.getElementById('submenu').style.visibility='hidden';
		}		
		if(rememberActiveTabByCookie){
			var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
			cookieValue = cookieValue.replace(/[^0-9]/g,'');
			if(cookieValue.length>0 && cookieValue<menuItems.length){
				activeTabIndex = cookieValue/1;
			}			
		}
		
		var currentLeftPos = 15;
		for(var no=0;no<menuItems.length;no++){			
			if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
			menuItems[no].id = 'mainMenuItem' + (no+1);
			if(menuAlignment=='left')
				menuItems[no].style.left = currentLeftPos + 'px';
			else
				menuItems[no].style.right = currentLeftPos + 'px';
			currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer; 
			
			var img = menuItems[no].getElementsByTagName('IMG');
			if(img.length>0){
				img[0].style.display='none';
				if(MSIE && !Opera && navigatorVersion<7){
					img[0].style.bottom = '-1px';
					img[0].style.right = '-1px';
				}
			}
						
			if(no==activeTabIndex){
				menuItems[no].className='activeMenuItem';
				activeMenuItem = menuItems[no];
				var img = activeMenuItem.getElementsByTagName('IMG');
				if(img.length>0)img[0].style.display='inline';	
							
			}else menuItems[no].className='inactiveMenuItem';
			if(!document.all)menuItems[no].style.bottom = '-1px';
			if(MSIE && navigatorVersion < 6)menuItems[no].style.bottom = '-2px';
			

		}		
		
		var mainMenuLinks = mainMenuObj.getElementsByTagName('A');
		
		var subCounter = 1;
		var parentWidth = mainMenuObj.offsetWidth;
		while(document.getElementById('submenu_' + subCounter)){

			var subItem = document.getElementById('submenu_' + subCounter);
			
			if(leftAlignSubItems){
				// No action
			}else{							
				var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
				document.getElementById('submenu_'+subCounter).style.paddingLeft =  leftPos + 'px';
				subItem.style.position ='absolute';
				if(subItem.offsetWidth > parentWidth){
					leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth); 	
				}
				subItem.style.paddingLeft =  leftPos + 'px';
				subItem.style.position ='static';
					
				
			}
			if(subCounter==(activeTabIndex+1)){
				subItem.style.display='block';
			}else{
				subItem.style.display='none';
			}
			
			subCounter++;
		}
		if(document.all){
			mainMenuObj.style.visibility = 'visible';
			document.getElementById('submenu').style.visibility='visible';
		}		
		document.getElementById('submenu').style.display='block';
	}
	window.onload = initMenu;	
	</script>

And where you want your menu to appear, put this:

<div id=\"navigation-bg\">
    <div id=\"navigation\" class=\"menu\">
     <a href=\"#\" class=\"signup\"></a> <br class=\"spacer\" />
<!-- This is the start of the menu -->
<div id=\"mainMenu\">
	<a>Home</a>
	<a>About</a>
	<a>Voice</a>
	<a>Internet</a>
   	<a>Assistance</a>
   	<a>Links &amp; News</a>
   	<a>Contact</a>
</div>
<div id=\"submenu\">
	<!-- The first sub menu -->
	<div id=\"submenu_1\">
		<a href=\"#\">Product 1</a>
		<a href=\"#\">Product 2</a>
		<a href=\"#\">Product 3</a>
	</div>
	<!-- Second sub menu -->
	<div id=\"submenu_2\">
		<a href=\"#\">Phone</a>
		<a href=\"#\">Email</a>
		<a href=\"#\">Knowledge base</a>
	</div>
	<!-- Third sub menu -->
	<div id=\"submenu_3\">
		<a href=\"#\">History</a>
		<a href=\"#\">The team</a>
		<a href=\"#\">Contact us</a>
		<a href=\"#\">Visions</a>
	</div>
	<!-- Fourth sub menu -->
	<div id=\"submenu_4\">
		<a href=\"#\">Patches</a>
		<a href=\"#\">Whitepapers</a>
		<a href=\"#\">Tab menu</a>
		<a href=\"#\">Color picker</a>
		<a href=\"#\">Window scripts</a>
		<a href=\"#\">Games</a>
	</div>
   	<div id=\"submenu_5\">
		<a href=\"#\">Patches</a>
		<a href=\"#\">Whitepapers</a>
		<a href=\"#\">Tab menu</a>
		<a href=\"#\">Color picker</a>
		<a href=\"#\">Window scripts</a>
		<a href=\"#\">Games</a>
	</div>
    <div id=\"submenu_6\">
		<a href=\"#\">Patches</a>
		<a href=\"#\">Whitepapers</a>
		<a href=\"#\">Tab menu</a>
		<a href=\"#\">Color picker</a>
		<a href=\"#\">Window scripts</a>
		<a href=\"#\">Games</a>
	</div>
    <div id=\"submenu_7\">
		<a href=\"#\">Patches</a>
		<a href=\"#\">Whitepapers</a>
		<a href=\"#\">Tab menu</a>
		<a href=\"#\">Color picker</a>
		<a href=\"#\">Window scripts</a>
		<a href=\"#\">Games</a>
	</div>
</div>

    <br class=\"spacer\" />
  </div>
</div>

That should do the trick.

When you are happy with it, you can put everything in seperate files :)

MikeC

Incase it isn't obvious, alter this:

<div id="mainMenu">
<a>Home</a>
<a>About</a>
<a>Voice</a>
<a>Internet</a>
<a>Assistance</a>
<a>Links & News</a>
<a>Contact</a>
</div>

To include whatever you want your top level menu items to be. For each of those there needs to be a seperate sub menu, alter what appears in the sub menus by editing this:

<div id="submenu_1">
<a href="#">Product 1</a>
<a href="#">Product 2</a>
<a href="#">Product 3</a>
</div>

apples

Thanks Mike

I'll try this out on Monday when I get back in the office :)

apples

Tested it out...VERY close, this is about as far as I got as well. The problem being, as soon as I put the information where I want the menu to appear, it's overwriting what I've stated it to appear like. It's looking just like the one from dhtmlgoodies.com My images, fonts, colors, etc are not used :?: How can I redirect it to look at the css it should be

MikeC

You need to go through the CSS from DHTML goodies that I posted, and change that to match your own styles.

Eludiac

Holy moly Mike, you went through a lot of work to make this happen. Kudos to you! Also, thanks to everyone for posting those resources. Im trying to make a horizontal sub-menu too, and these resources were great!

HugoGiraudel

Please, use CodePen or JSFiddle for reduced test cases.

wolfcry911

CodePen didn't exist 5 years ago

HugoGiraudel

Oh, waw. I should definitely pay more attention to post date. :)

treehouse : what would you like to learn today?

Forums

[Solved] CSS Horizontal sub menu help