Drop down menu problem

[sg552]

Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else.

This is the original html template
http://www.styleshout.com/templates/preview/MarketPlace11/index.html

This is my website with drop down menu added but it's not working
http://ghazifly.110mb.com/marketplace11/

I guess the template CSS might clash with the dropdownmenu CSS.

My index.html navigation code, I think theres nothing wrong with this code.

<!-- navigation starts-->
<div id="nav">
<div class="c1">
<ul id="jsddm">
<li><a href="index.html">Home</a></li>
<li><a href="#">Drop Down Menu</a>
<ul>
<li><a href="#">Other page</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
	<!-- navigation ends-->

My website CSS top navigation code:

/* Navigation */
#nav {
	clear: both;	
	padding: 0;			
}
#nav ul {
	float: left;
	list-style: none;
	background: #E4E4E4 url(nav.jpg) repeat-x;	
	
	padding: 0;	margin: 0 0 0 30px;
	height: 45px;
	display: inline;
	text-transform: uppercase;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	display: block;

	width: auto;
	margin: 0;
	padding: 0 15px;	
	border-right: 1px solid #dadada;
	border-left: 1px solid #fafafa;	
	border-bottom: none;
	color: #555;
	font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #326ea1;
}
#nav ul li#current a {	
	background: #DBDBDB url(nav-current.jpg) repeat-x;		
}

My dropdownmenu CSS code:

/* menu styles */
#jsddm
{	margin: 0;
	padding: 0}

	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial}

	#jsddm li a
	{	display: block;
		background: #324143;
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		width: 70px;
		color: #EAFFED;
		white-space: nowrap}

	#jsddm li a:hover
	{	background: #24313C}
		
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-top: 1px solid white}
		
			#jsddm li ul li
			{	float: none;
				display: inline}
			
			#jsddm li ul li a
			{	width: auto;
				background: #A9C251;
				color: #24313C}
			
			#jsddm li ul li a:hover
			{	background: #8EA344}

I get the drop down menu code from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working,

So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated.

Thanks in advance :)

[papanyquiL]

Take away your 'float: left' on #nav ul li a.

[sg552]

Sorry for this late reply. I found help from other forum and decide to go with inline CSS.

source : http://www.webmaster-talk.com/1051440-post2.html

After some modification :
My website internal CSS (I also still use original template CSS)

<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a:hover
{ background: #DBDBDB}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #E4E4E4; /*LIGHT-GREEN*/
color: #666666}

#jsddm li ul li a:hover
{ background: #DBDBDB}
</style>

Inline CSS navigation

<!-- navigation starts-->
<div id="nav">
<div class="c1">
<ul id="jsddm">
<li><a href="http://ghazifly.110mb.com/marketplace11/index.html">Home</a></li>
<li><a href="#">Drop Down Menu</a>
<ul style="visibility: hidden; margin-top:45px; width:120px; left:108px;">
<li style="float:none; "><a href="http://www.google.com" style="float:none; width:145px;">Sejarah Sekolah</a></li>
<li  style="float:none;"><a href="#"  style="float:none; width:145px;">Lokasi Sekolah</a></li>
<li  style="float:none;"><a href="#"  style="float:none; width:145px;">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="http://ghazifly.110mb.com/marketplace11/index.html">Archives</a></li>
<li><a href="http://ghazifly.110mb.com/marketplace11/index.html">About</a></li>
</ul>
</div>
<!-- navigation ends-->
	</div>

thanks for your time Mr. :)