Hi developers!

I have a laundry list of problems with my infantile drop down menu. This should probably be several posts. Any sort of help will be viewed as a wonderful gesture of human kindness. Let me know if there is anything I can do to repay you. I'm an English teacher by trade so I can edit and revise text very well. If you help me and need text professionally edited, let me know on this forum and I'll set up an email so you can send me your work for proofing.

I'm very new at JS but spent the better part of a workday messing with this stuff.

I'm using jQuery with Brian Cherne's HoverIntent plugin
http://cherne.net/brian/resources/jq...verIntent.html

Here are the issues I have. I have a lot

  • I can't make the navbar main items display inline and navbar subitems to display block.
  • I want the menu to drop down over the bottom <hr /> instead of moving the bottom <hr /> with the content.
  • I want to make the background on navbar main items turn into a black box with white text on user mouseover.
  • I want the background on navbar sub items (ul class="active") to be black with white text, then flip to white with black text when users mouse over them
  • I can't get the drop down menus to be smooth on mouseover and mouse out. They tend to stutter and it drives me crazy.


Here is a demo of this abomination:

http://harrisonownbey.com/lorem/demo.html


Here is the HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Home</title>

<link type="text/css" rel="stylesheet" href="style.css" media="screen" />

<script type="text/javascript" src="jquery.js">
</script>

</head>
<body>
<div id="main">

<ul id="navbar">
<hr />
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">navbar item 1</a>
<ul class="active">
<li><a href="#">navbar subitem 1.1</a></li>
<li><a href="#">navbar subitem 1.2</a></li>
<li><a href="#">navbar subitem 1.3</a></li>
</ul>
</li>
<li>
<a href="#">navbar item 2</a>
<ul class="active">
<li><a href="#">navbar subitem 2.1</a></li>
<li><a href ="#">navbar subitem 2.2</a></li>
<li><a href="#">navbar subitem 2.3</a></li>
</ul>
</li>
<li>
<a href="#">navbar item 3</a>
</li>
</ul>
<script type="text/javascript" src="script.js">
</script>
<hr />
</body>
</html>

Here is the JS:

$('#navbar > li > ul')
.hide()
.click(function(e) {
e.stopPropagation();
});

$('#navbar > li').toggle(function() {
$(this).find('ul').slideDown();
100}, function() {
$(this).find('ul').slideUp();
100});

$('#navbar > li').hover(function() {
$(this).addClass('waiting');
setTimeout(function() {
$('#navbar .waiting')
.click()
.removeClass('waiting');
}, 600);
}, function() {
$('#navbar .waiting').removeClass('waiting');
});

$('#navbar li ul').css({
display:"none",
left:"auto"
});
$('#navbar li').hover(function() {
$(this)
.find('ul')
.stop(true, true)
.slideDown('fast');
}, function() {
$(this)
.find('ul')
.stop(true, true)
.slideUp('fast');
});


And finally, here is the CSS:

hr {
width: 960px;
height: 3px;
background-color: black;
}

#main {
width: 960px;
margin: auto;
}

a:link {
color: #000000;
text-decoration: none;
}

a:link {
color: #000000;
text-decoration: none;
}

a:hover {
color: #CC0000;
text-decoration: underline;
}

a:active {
color: #000000;
}

#navbar {
font-size: large;
font-family: helvetica, sans-serif;
}

#navbar, #navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}

#navbar li {
display: inline;
list-style-type: none;
cursor: pointer;
background: #000000
color: #FFFFFF
border-bottom: 1px solid #FFFFFF;
}

#navbar li a {
text-decoration: none;
}

#navbar > li > a {
font-weight: bold;
}

#navbar li li {
cursor: auto;
border: 0;
background-color: #FFFFFF
}

#navbar a {
display: block;
list-style-type:none;
padding: 4px;
width:10em;
}

#navbar li:hover ul, #navbar li ul:hover {
left: auto;
}

Thanks again for all your help! This is an awesome forum.