How to make sub menues in a dropdown menu?

**bobicool** · 07-21-2009 04:29 PM

I have a drop down menu made in css. When you hover over the text (<ul>) the menu appears (the <li> appears). I wanted to know, how to make a submenue, that when you hover over the <li>'s an other menu (submenu) would appear and would offer other options.

Ex:

-Tutorials (You hover over tutorials)
(Then these options appear):
-Video tutorials
-Other tutorials
-Windows (and if you hover over windows you have 3 choices) //How do I make that!
-Windows xp
-windows 7
-Windows Vista

That is what I want to make.

Thanks people!!

Tell me if it's not clear (witch I know it is)

-bobicool

**Andyram2k** · 07-21-2009 04:47 PM

Hi Bobicool,
There are quite a few out there, that you can use to learn from. For example, you could potentially use something like:

http://users.tpg.com.au/j_birch/plugins/superfish/

Hope this helps

**bobicool** · 07-21-2009 05:42 PM

This is a bit complicated...I'm only starting in html/css php/mysql

Here is my html code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
		<META NAME="description" CONTENT="The teen tech podcast is a tech podcast talking about everything tech related! Also there are reviews, news and a forum! If you get bored your stupid!" />
        <META NAME="keywords" CONTENT="teen, tutorials, web, reviews, news, forum, fun, technology, podcast, tech, teentechpodcast, twitter, etc..." />
	    <META NAME="AUTHOR" CONTENT="someone">
		<title>TeenTechGuy.com, One teen, One guy and a massive industry to cover! **Pre Pre alpha**</title>
		<link rel="stylesheet" href="style3.css" type="text/css" media="all">

		<link rel="shortcut icon" type="image/png" href="images/favicon.ico">
		<link rel="stylesheet" type="text/css" href="menu/menu_style.css" media="all">
	    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
	    <script type="text/javascript" src="js/jquery.js"></script>
	    <script type="text/javascript" src="js/accordeon.js"></script>


	</head>

	<body>
	<!-- all the page -->
		<div id="wrapper">
	     <!-- The header -->
		<div id="header">				  
		 	<a href="index2.htm" ><img src="images/logo3.png" width="247" height="104" alt="Logo" a href="index2.htm" class="no_cadre"></a>
	     <!-- The links -->

<div class="menu">

<ul>
<li><a id="current" href="index.html" target="_self" >Home</a>
</li>
<li><a href="news,html" target="_self" >News</a>
<ul>
<li><a href="vidgamenews.html" target="_self">Video Game News</a></li>
<li><a href="" target="_self">Tech News</a></li>
</ul>
</li>
<li><a href="reviews.html" target="_self" >Reviews</a>
<ul>
<li><a href="vidreviews.html" target="_self">Video Game Reviews</a></li>

<li><a href="hardwarereviews.html" target="_self">Hardware Reviews</a></li>
<li><a href="softreviews.html" target="_self">Software Reviews</a></li>
<li><a href="otherreviews.html" target="_self">Others...</a></li>
</ul>
</li>
<li><a href="teentechpodcast.html" target="_self" >Podcast</a>
<ul>
<li><a href="teentechguy.html" target="_self">Teen Tech Guy</a></li>
<li><a href="fav.html" target="_self">My Favorites</a></li>
</ul>
</li>

<li><a href="tutorials.html" target="_self" >Tutorials</a>
<ul>
<li><a href="gimptuts.html" target="_self">Gimp Tutorials</a></li>
<li><a href="csstuts.html" target="_self">CSS Tutorials</a></li>
<li><a href="htmltuts.html" target="_self">HTML tutorials</a></li>
<li><a href="windowstuts.html" target="_self">Windows Tutorials</a></li>
<li><a href="vidtuts.html" target="_self">Video Tutorials</a></li>
<li><a href="othertuts.html" target="_self">Others...</a></li>
</ul>
</li>

<li><a href="http://techforums.freeforums.org/index.php" target="_self" >Forum</a>
</li>
<li><a href="about.html" target="_self" >About</a>
<ul>
<li><a href="aboutme.html" target="_self">About Me</a></li>
<li><a href="aboutsite.html" target="_self">About the site</a></li>
</ul>
</li>
</ul>
</div>
		</div>
		<div id="sous"><img src="images/sous.png" style="padding:0px" /></div>

		<!-- End of header -->
		
		<!--
		<div id="menulinks">
	    </div>
		-->
		<!--
		<div id="page_top">
		</div>
		    -->
	    <!-- All the page content is here **The container** -->
		<div id="page_container">
		<!-- Top of the conatainer (rounded corners) -->
		  <h2 id="page_top">Topic of the day:</h2>
	
		        <!-- Where the text/images etc.. goes -->

		        <div id="contentarea">
		        	<p><a href="chamilionaire.mp3">Chamilionaire</a></p>
					<script language="javascript">
<!--
         var part1 = "raphael_dore";
         var part2 = "hotmail.com?subject=Hello Raph";
         var part3 = "Contact me";
         document.write('<a href="mai' + 'lto:' + part1 + '@' + part2 + '">');
         document.write(part3 + '</a>');
// -->
</script>
	    	    </div>		
		    	<!-- Sidebar/menu to naviguate in the site -->
    <div id="sidebar">
		     	<div class="bloc">
				<h3>Navigation</h3>

			 <h2 class="ascenseur">Tests</h2>
			 <div>
			 	<ul>
					<li>Mp3's</li>
					<li>TV's</li>
					<li>Games</li>
					<li>Software</li>

					<li>Hardware</li>
				</ul>
				</div>
				<h2 class="ascenseur">Categories</h2>
				<div>
				<ul>
				     <li>Games</li>

			 	     <li>Tech</li>
				     <li>Web coding/web design</li>
			    </ul>
				</div>
				<h2 class="ascenseur">Reviews</h2>
				<div>
				<ul>

					<li>Mp3's</li>
					<li>TV's</li>
					<li>Games</li>
					<li>Software</li>
					<li>Hardware</li>
				</ul>	
				</div>

				</div>
			    <div class="Finbloc"></div>
	</div>	     			   
		     	<!-- The footer -->
		     <div id="footer">
			 <p>
			 	
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS Valide !">
    </a>


		    <a href="http://www.twitter.com/videogameteen" ><img src="images/twitter.png" width="65px" height="18px" title="Join the Video Game Teen on twitter!" alt="www.twitter.com/videogameteen" class="no_cadre"></a>
			Coded and designed by: Teen tech guy, all rigths reserved</p>
			</div>
		    <!-- End of footer -->
  	     </div>  <!-- end page_container -->
	
	</div> <!-- end wrapper -->	
	</body>

</html>

and here is the css code for the menu:

Code:

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font-family:verdana,geneva,arial,helvetica,sans-serif;
	font-size:18px;
	font-weight:bold;
	color:8e8e8e;
	}
.menu ul{
	background:url(images/menu-bg.gif) top left repeat-x;
	height:43px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px 8px 0px 8px;
		}
	.menu li a{
		color:#ffffff;
		display:block;
		font-weight:bold;
		line-height:43px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover{
			color:#gggggg;
			text-decoration:none;
			}
	.menu li ul{
		background:#e10606;
		border-left:2px solid #a80329;
		border-right:2px solid #a80329;
		border-bottom:2px solid #a80329;
		display:none;
		height:auto;
		filter:alpha(opacity=95);
		opacity:0.95;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		}
	.menu li li {
		display:block;
		float:none;
		padding:0px;
		width:225px;
		}
	.menu li ul a{
		display:block;
		font-size:12px;
		font-style:normal;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover{
			background:#3386b6;
			color:#000000;
			opacity:1.0;
			filter:alpha(opacity=100);
			}
	.menu p{
		clear:left;
		}	
	.menu #current{
		backgroud:url(images/current-bg.gif) top left repeat-x;
		color:#ffffff;
		}
		.menu 
		{
		padding-top:0px;
		padding-right:0px;
		padding-bottom:0px;
		padding-left:0px;
        }

Thanks for helping!

ps: thanks anyway Andyram2k, this will certainly be in use in the future!

**DaiLaughing** · 07-22-2009 02:55 AM

There is a fairly simple guide to creating a CSS drop down menu here. It is up to you to make it look pretty though.

**WestWeb** · 07-22-2009 08:13 PM

Here is a simple CSS dropdown menu I whipped up for ya...
It works in FF and S, but I didn't get a chance to test it in IE and it will need to be tweaked to your liking.

HTML(index.html):

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

<ul class="topmenu">
<li class="top"><a class="top">Tutorials</a>
<ul class="submenu">
<li class="sub"><a class="sub">Video Tutorials</a></li>
<li class="sub"><a class="sub">Other Tutorials</a></li>
<li class="sub"><a class="sub">Windows</a>
<ul class="subsubmenu">
<li class="subsub"><a class="subsub">Windows XP</a></li>
<li class="subsub"><a class="subsub">Windows 7</a></li>
<li class="subsub"><a class="subsub">Windows Vista</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</body>
</html>

CSS(styles.css):

ul.topmenu{
list-style: none;
border: solid #000000 1px;
}

a.top{
text-decoration: none;
}
a.top:hover{
text-decoration: underline;
}

ul.submenu, li.sub{
display: none;
}

li.top:hover ul.submenu, li.sub{
display: block;
}

ul.submenu{
position: absolute;
width: 100px;
border: solid #000000 1px;
text-align: center;
}

a.sub{
text-decoration: none;
}
a.sub:hover{
text-decoration: underline;
}

ul.subsubmenu, li.subsub{
display: none;
}

li.sub:hover ul.subsubmenu, li.subsub{
display: block;
}

ul.subsubmenu{
position: absolute;
width: 100px;
border: solid #000000 1px;
text-align: center;
}

a.subsub{
text-decoration: none;
}
a.subsub:hover{
text-decoration: underline;
}

Thread: How to make sub menues in a dropdown menu?

Thread Tools

Display

How to make sub menues in a dropdown menu?

Simple CSS dropdown

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions