Hi all, I've been browsing this forum the past few days and researching a lot in order to figure out an answer to my problem with no luck. For a little background I'm using Expression Web and I've modified one of the dynamic web templates and CSS sheet to fit the needs of our company. In continuing to try and improve the site and add content, I wanted to spice up the navigation with some flyouts for more direct browsing to sections of the site. I'm not a skilled web programmer, and I have not taken any formal classes. Most of the work I've done on our site was learn as I go and so far has worked well.

It's been my goal to try and avoid as much javascript as I can, although if you do end up browsing the site there is a javascript slideshow for products and such, but has a noscript version as well. I've followed the steps on A List Apart to get the basic layout of the nav bar & submenus, but there are a couple quirks I can't seem to figure out.

First a problem with IE, I wish to have the background color change as you roll over each list item (not just the link text), have the text bolded and be able to click the whole list item row for the link, which does work up until I insert
Code:
ul li {
	position: relative;
	}
into my CSS to make the submenus popup directly to the right of the highlighted option, after that only hovering over the link text itself causes the desired effects.

The second problem, in FF and IE is having my third level submenu from Products already displaying without rolling over Accessories in the second level submenu. And also the rollover problem still exists here too in IE.

Here is the CSS I'm using so far and the test page can be viewed from http://necomsolutions.com/test/testpage.htm
Code:
#sidebar {
	position: relative;
	float: left;
	width: 15%;
	background-color: #DFE8FF;
	clear:both;
	margin-left: 10px;
	border-left: solid 1px #0000AA;
	border-bottom: solid 1px #0000AA;
	border-right: solid 1px #0000AA;
	display:inline;
}
#sidebar ul {
	list-style-type:none;
	display:block;
	margin:0;
	padding:0;
	width:100%;
}
#sidebar li {	
	margin:0;
	padding:0;
	border-bottom: 1px solid #0000AA;
	color:#0000AA;
}
#sidebar a {
	text-decoration:none;
	color:#0000AA;
	display:block;
	padding:5px;
}
#sidebar a:hover{
	background-color:#B3CBFF;
	font-weight:bold;
	color:#0000AA;
}
#sidebar li > ul {
	display: none;
	position: absolute;
	background-color: #DFE8FF;
	top: 0;
	left: 100%;
}
#sidebar ul li {
	position: relative;
}
#sidebar li:hover ul {
	display:block;
}
Thanks in advance for any input you may have.