www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jun 2009
    Posts
    9

    How to make sub menues in a dropdown menu?

    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

  2. #2
    Join Date
    Apr 2009
    Posts
    122
    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
    - Andy

  3. #3
    Join Date
    Jun 2009
    Posts
    9
    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!
    Last edited by bobicool; 07-21-2009 at 05:45 PM.

  4. #4
    Join Date
    Jul 2009
    Posts
    91
    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.

  5. #5
    Join Date
    Jul 2009
    Posts
    184

    Simple CSS dropdown

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14900 seconds
  • Memory Usage 2,909KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates