problem in drop down menu

[burki]

hi all,
i have a problem,
i have a menu like this,

<div class="nav">
<ul><li><a href="#">products</a>
<ul><li><a href="">category1<a>
 <ul class="child-category">
<li><a href="#">child category 2</a></li>
<li><a href="#">child category 3</a></li>
</ul>
<ul>
<li><a href="">product of category 1<a/></li>
<li><a href="">product of category 1<a/></li>
</ul>
</li>
</ul>
</div>

it must show the menu like this.
porduct
category1
child category 2
child category 3
product of category 1
product of category 1
but it only show the products not the child categories,
i m using the wordpress builtin style sheet for menu. but it is no working.

is there any way that i remove ul tag of child categories and insert its li to the ul of product with javascrip or jquery,
or anr way through css,
thanks in advance.

[AndrewGSW]

Your HTML is a mess (to be frank..!) so I suggest you fix this first before looking to JavaScript solutions.

The tags that you use all require closing. So,
<li>Requires the following closing tag</li>

Tags are closed like </this> NOT <this/>

Tags should not overlap <like>this<this></like></this>

[Old Pedant]

Just to show you what Andrew means, here is your HTML properly indented.
As you can see, you have a missing </li> and a missing </ul>.

Whether or not the ones I show here (in red) match the missing ones only you can tell us. Your browser *MAY BE* automatically supplying them where I am showing, but it could be automatically supplying them someplace else. When you miss things like this, different browser can (and sometimes do) interpret them differently.

<div class="nav">
    <ul>
        <li>
            <a href="#">products</a>
            <ul>
                 <li>
                     <a href="">category1<a>
                     <ul class="child-category">
                         <li><a href="#">child category 2</a></li>
                         <li><a href="#">child category 3</a></li>
                     </ul>
                     <ul>
                         <li><a href="">product of category 1<a/></li>
                         <li><a href="">product of category 1<a/></li>
                     </ul>
                </li>
            </ul>
        </li><!-- missing -->
    </ul><!-- missing -->
</div>

[burki]

yes Old Pedant ,
yes Exactly this my html but it only shows the " product of category 1" not the "child category 2" and "child category 3" in drop down when mouse over on category1.
below is my stylesheet.

#nav {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}
#nav ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#nav li {
	float: left;
	position: relative;
}
#nav a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#nav ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#nav ul ul ul {
	left: 100%;
	top: 0;
}
#nav ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#nav li:hover > a,
#nav ul ul :hover > a,
#nav a:focus {
	background: #efefef;
}
#nav li:hover > a,
#nav a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#nav ul li:hover > ul {
	display: block;
}
#nav .current-menu-item > a,
#nav .current-menu-ancestor > a,
#nav .current_page_item > a,
#nav .current_page_ancestor > a {
	font-weight: bold;
}

thanks in advance for your help.

[Old Pedant]

Not in my testing.

Here, a COMPLETE HTML PAGE using your code and my FIXED to your HTML.

<html>
<head>
<style type="text/css">
#nav {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}
#nav ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#nav li {
	float: left;
	position: relative;
}
#nav a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#nav ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#nav ul ul ul {
	left: 100%;
	top: 0;
}
#nav ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#nav li:hover > a,
#nav ul ul :hover > a,
#nav a:focus {
	background: #efefef;
}
#nav li:hover > a,
#nav a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#nav ul li:hover > ul {
	display: block;
}
#nav .current-menu-item > a,
#nav .current-menu-ancestor > a,
#nav .current_page_item > a,
#nav .current_page_ancestor > a {
	font-weight: bold;
</style>
</head>
<body>

<div class="nav">
    <ul>
        <li>
            <a href="#">products</a>
            <ul>
                 <li>
                     <a href="">category1<a>
                     <ul class="child-category">
                         <li><a href="#">child category 2</a></li>
                         <li><a href="#">child category 3</a></li>
                     </ul>
                     <ul>
                         <li><a href="">product of category 1<a/></li>
                         <li><a href="">product of category 1<a/></li>
                     </ul>
                </li>
            </ul>
        </li><!-- missing -->
    </ul><!-- missing -->
</div>
</body>
</html>

EVERYTHING shows up.

[Old Pedant]

Oh...no wonder!

You showed

<div class="nav">

in your first post, and it should be

<div id="nav">

!!!!

Yes, now I see what you see.

But I *STILL* think you may have a problem in your </li> and </ul>.

I think that the ones I put in (the ones in red in my first post) are PROBABLY in the WRONG PLACES.

[Old Pedant]

Hmmm...look what happens if you reverse the two:

<div id="nav">
    <ul>
        <li>
            <a href="#">products</a>
            <ul>
                 <li>
                     <a href="">category1<a>
                     <ul>
                         <li><a href="">product of category 1 FIRST<a/></li>
                         <li><a href="">product of category 1 SECOND<a/></li>
                     </ul>
                     <ul class="child-category">
                         <li><a href="#">child category 2</a></li>
                         <li><a href="#">child category 3</a></li>
                     </ul>
                </li>
            </ul>
        </li><!-- missing -->
    </ul><!-- missing -->
</div>

Well, in any case, this is in the WRONG FORUM

This has NOTHING to do with JAVASCRIPT.

You should post this in the CSS forum.