how to make dropdown menu ?

[okekuya]

hi guys , i'm new in here , let's get to the point of the problem ,

i've got some php coding and the css coding problem in making a dropdown menu. ok the condition now for the navigation menu is still static a.k.a it doesn't has any dropdown menu at all .. and i want to make it at least 1 category menu can be dropdown . this is what i want --> http://graphpaperpress.com/demo/ ( and chooce theme called " F8 " --> that's a dropdown i want to make ,) but so far all i can do is just like this :

this is i've edited on my header.php for the navigation menu :

<!-- Begin Navigation -->


	<div id="navcontainer">

		<ul id="navlist">

		<li><a href="<?php echo get_settings('home'); ?>/" title="Return to the the frontpage">Home</a></li>

		<li><a href="<?php echo get_settings('home'); ?>/archives/category/News/" title="News">News</a></li>

<ul>
<li><a href="<?php echo get_settings('home'); ?>/archives/category/Labels/" title="Labels">Labels</a>
<ul>
<li><a href="#nogo">test1</a></li>
<li><a href="#nogo">test2</a></li>
<li><a href="#nogo">test3</a></li>
</ul>
</li>
</ul>



<li><a href="<?php echo get_settings('home'); ?>/Galleries/" title="Galleries">Galleries</a></li>
<li><a href="<?php echo get_settings('home'); ?>/About/" title="About">About</a></li>

		<li><a href="<?php echo get_settings('home'); ?>/Contact/" title="Contact">Contact</a></li>

	</ul>
</div>
</div>

and this is for the style.css for the navigation menu

/************************* MASTHEAD ************************************/



.logo {height:100px; width: 350px;} 

.pusher {cursor:pointer;}

#masthead { background: padding: 0;border-top:5px solid #000;}

#masthead h4 {margin:1em 0;font-weight: bold; text-transform: uppercase;width:100%;}

#masthead h4 a { color: #333; text-decoration: none; float:left;} 

#masthead h4 a:hover {color:#000;}

#masthead span {color:#666;font-size:.8em;text-transform:lowercase;font-weight:normal;}

#masthead span.description {float:left;margin-left: 20px;padding-top:.2em;}

#masthead span.contact {float:right;line-height:1em;}

#masthead span.contact a:hover {color:#000;}




#navcontainer {padding: 0;font-family:"helvetica", Helvetica, Arial, sans-serif;text-align: right;background-color: #000;height:40px;margin:0 0 1em;}

#navlist {height:40px}

#navcontainer p	{padding: 7px 7px 0px;font-family:"helvetica", Helvetica, Arial, sans-serif;font-size: 1em;font-weight: bold;}

/* to stretch the container div to contain floated list */

#navcontainer:after {content: ".";display: block;line-height: 1px;font-size: 1px;color:#000 ; transparent;clear: both;}

#navcontainer img {margin: 0;padding: 0;}



ul#navlist {list-style: none;padding: 0;margin: 0px;background-color: #000;font-size: 1em;}

ul#navlist li {text-align: left;float: left;height: 40px;margin: 0;background: #000;border-right:1px solid #ccc;padding: 0;}

ul#navlist li { width: 105px; voice-family: "\"}\""; voice-family:inherit; width: 119px;}

html>body ul#navlist li { width: 119px; }

ul#navlist li a {display: block;padding: 7px 5px 25px 7px;color: #eee;font-size: 11px;text-decoration: none;height: 1%;height:40px;text-shadow: 0 0 0 #000;}

#navcontainer>ul#navlist li a {width: auto;height: auto;height: 8px}

ul#navlist li#active a {background: #eee;color: #<?php echo $ss_nav_hover_color; ?>;}

ul#navlist li a:hover,ul#navlist li#active a:hover {color: #fff;background-color: #188618;}


ul#navlist li.home	{border-left: none;}


ul#navlist li#empty	{width: 120px;}

and it result like this when i'm done edited my header.php -->

so i make 3 sub category down , test 1 , test 2 , test 3 , but the position is so mess up and after mouse over out from labels the dropdown from test1,test2,test3 still opened condition won't close or invisible , so guys , please help me , what should i do if i want to make the dropdown when mouse into inside labels it show a dropdown of the subcategory and when mouse over out of labels the dropdown will be invisible ? and how if i want to add some effect to that drop down , like invisible slowly or slowmotion invisible ?

 

[DimitriDV]

look for google dude, all I can say
100's of 1000's of examples of dropdown menu's (html & css explanation)

 

[okekuya]

i tried already but the only give basic dropdown ,,, but i don't know how to combine it inside the css for the code .. so , if anyone willing to share with me , taht would be nice ... thx

 

[AusQB]

Try this. Mess around with the divs to add or remove menus, and obviously change the CSS to suit your needs.

<ul id="sddm">
	<li>
		<a href="">Home</a>
	</li>
	<li>
		<a href="">News</a>									    
	</li>
	<li>
	        <a href="" onmouseover="mopen('m1')" onmouseout="mclosetime()">Labels</a>
		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="">List item 1</a>
			<a href="">List item 2</a>
		</div>
	</li>
	<li>
		<a href="" onmouseover="mopen('m2')" onmouseout="mclosetime()">Galleries</a>
		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="">List item 1</a>
			<a href="">List item 2</a>
		</div>
	</li>
	<li>
		<a href="">About</a>
	</li>
	<li>
		<a href="" onmouseover="mopen('m3')" onmouseout="mclosetime()">Contact</a>
		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="">List item 1</a>
			<a href="">List item 2</a>
		</div>
	</li>
</ul>

#sddm {	
	margin: 0;
	padding: 0;
	z-index: 30;
}

#sddm li {	
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: 11px Verdana;
}

#sddm li a {	
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 70px;
	background: #000000;
	color: #808080;
	text-align: left;
	text-decoration: none;
}

#sddm li a:hover {	
	background: #333333;
	color: #FFFFFF;
}

#sddm div {	
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #222222;
	border: 1px solid #000000;
	z-index: 30;
}

#sddm div a {	
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #222222;
	color: #808080;
	font: 11px Verdana;
}

#sddm div a:hover {	
	background: #333333;
	color: #FFFFFF;
}

 

[okekuya]

Try this. Mess around with the divs to add or remove menus, and obviously change the CSS to suit your needs.

<ul id="sddm">
	<li>
		<a href="">Home</a>
	</li>
	<li>
		<a href="">News</a>									    
	</li>
	<li>
	        <a href="" onmouseover="mopen('m1')" onmouseout="mclosetime()">Labels</a>
		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="">List item 1</a>
			<a href="">List item 2</a>
		</div>
	</li>
	<li>
		<a href="" onmouseover="mopen('m2')" onmouseout="mclosetime()">Galleries</a>
		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="">List item 1</a>
			<a href="">List item 2</a>
		</div>
	</li>
	<li>
		<a href="">About</a>
	</li>
	<li>
		<a href="" onmouseover="mopen('m3')" onmouseout="mclosetime()">Contact</a>
		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
			<a href="">List item 1</a>
			<a href="">List item 2</a>
		</div>
	</li>
</ul>

#sddm {	
	margin: 0;
	padding: 0;
	z-index: 30;
}

#sddm li {	
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: 11px Verdana;
}

#sddm li a {	
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 70px;
	background: #000000;
	color: #808080;
	text-align: left;
	text-decoration: none;
}

#sddm li a:hover {	
	background: #333333;
	color: #FFFFFF;
}

#sddm div {	
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #222222;
	border: 1px solid #000000;
	z-index: 30;
}

#sddm div a {	
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #222222;
	color: #808080;
	font: 11px Verdana;
}

#sddm div a:hover {	
	background: #333333;
	color: #FFFFFF;
}

@AusQB
ok i'll see what i can do from your code ... thx for the sharing

 

[PixelPusher]

Are you going for a full css dropdown or just wanting to use css to style an existing dropdown? The example AusQ gave looks good, but it will require the use of javascript (as many do). I gave an example of a full css dropdown menu in another post in this forum called: CSS/HTML Navigation. Maybe this will help you.