Child Category Drop Down Menu Problem

I’ve been trying to make a subcategory (or child category) drop down menu for a while now. I tried many plugins, but some of them just display a pre-made bar on the top of my blog page. I wanted my main categories to be displayed in a certain area of my header file and then I wanted the categories to form a drop down of subcategories when you hover over them with a mouse. The other plugins I looked into I couldn’t really understand, even when doing research about them.

So finally, I’ve decided to ask for help here hoping that someone has a solution to the problem. I found a JQuery code that somewhat works, but, when the subcategories drop down into a menu after you hover over the main categories, it’s all disorganized and my post section lowers itself down the page (instead of the drop down menu going over the post section, everything lowers – if that makes sense). So, I don’t think I’m doing it right. Also, when you hover over the subcategories, some of them are discolored.

What I was trying to achieve was a green drop down menu box with a list of my child categories (once you hover over the main categories). Instead, the end result is completely different.

Here’s the code I put into the header file of WordPress:

<?php wp_enqueue_script('jquery'); ?>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("#nav ul").css({display: "none"}); // Opera Fix
jQuery("#nav li>ul").css({top: "auto", left: "auto"});
jQuery("#nav li ul li>ul").css({margin: "0", top: "0", left: "200px"});
jQuery("#nav li li").hover(function() {
    jQuery(this).css({backgroundColor: "#eee"});
    },function() {
    jQuery(this).css({backgroundColor: "#eee"});
});
jQuery("#nav li").hover(function(){
    jQuery(this).find('ul:first').css({visibility: "visible", display: "none"}).show(268);
    },function(){
    jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
});
</script>

<div id="wrapper">
		<div id="container" class="container">
            <div class="span-24">
<div id="navcontainer">
					<ul id="nav">

                        <li <?php if(is_home()) { echo ' class="current-cat" '; } ?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
						<?php wp_list_categories('depth=3&exclude=1&hide_empty=0&orderby=name&show_count=0&use_desc_for_title=1&title_li='); ?>
					</ul>
				</div>
			</div>

And here’s my website if you wanted to preview: https://www.cashcampfire.com

Thanks in advance to anyone willing to help.

Christina