Please help me with drop down menus!

This is the code that works than I'm trying to use.. It is a horizontal css popup menu.

HTML

<div id="menu"> 
<ul id="item1"> 
<li class="top">menu item</li> 
<li class="item"><a href="#">menu item 1</a></li> 
<li class="item"><a href="#">menu item 2</a></li> 
<li class="item"><a href="#">menu item 3</a></li> 
</ul> 
</div>

CSS

#menu ul .item{display:none;}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}

Code (markup):

My listing categories/hierarchy is controlled by word press so I can't really control that. I would like to know if I can modify the css to get this working. I'm trying to get the 'children' Appearance category to pop up under Automotive. Here is my NON working code:

HTML

<div id="dropmenu">
<ul>	
<li class="cat-item cat-item-3"><a href="#">Automotive</a>
<ul class='children'>
<li class="cat-item cat-item-7"><a href="#">Appearance</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-14"><a href="#">Featured Articles</a>
</li>
<li class="cat-item cat-item-1"><a href="#">Uncategorized</a>
</li>
</ul>
</div>

CSS

#dropmenu ul .children{display:none;}
#dropmenu ul:hover .children{display:block;}
#dropmenu{position:inline;}

Code (markup):

 

Hmm. Try to use this selector instead:

div#dropmenu ul.children li { }

Code (markup):

So you would have:

div#dropmenu { display: inline; }
     div#dropmenu ul.children li { display: none; }
          div#dropmenu ul.children li:hover { display: block; }

Code (markup):

Let me know if that doesn't work since I can't test it right now.
[EDIT] Oops, fixed the class name. Sorry.

 

Didn't seem to work, but thank you for you help. I created a page with the codes so you can see it. "menu item" works when you mouse hover it. Any more ideas?

http://diysrc.com/test.html