Alright shoot-gunning it for about 45 minutes, I got the border to be inline with the drop-down menu.
Sadly when you hover over one of the items in the drop-down menu the the light brown background actually extends to the past the gray border on the left.
Hello :).
The problem is that on #top-nav li{} you had a left padding of 23px set. Along with that, you have, on #top-nav li li{}, a negative left margin of 23px set.
So on #top-nav li li{} remove that left margin rule, and add in padding:0;. So your rule should look exactly like this
#top-nav li li{
padding:0;
}
That worked perfectly! Thanks! 
You’re welcome :).
Hey Ryan,
I got the underline to appear when hovering over the links on the top navigation, but when I hover over the Calendars link all of the items in the drop-down menu have an underline. I don’t want there to be any underlining on the drop-down menu links, even when hovering.
Thanks!
My test page can be found here.
Hello. Posting from my phone so I obviously can’t look at code. Previously in this thread you had #top-nav li a{} and set the text decoration there. Is it still like that? Well to reset it for the dropdown, just do something like…#top-nav li li a{text-decoration:none} :). It’ll select the dropdowns anchors and format that.
My code is set to:
#top-nav li li a {text-decoration:none}
It can wait until your in front of a computer.
Thanks Ryan!
Sorry about this, but I am stuck on yet another issue.
I am trying to add a background color and a border radius to the #top-navigation {} to help make it stand out better.
I’ve got it all set, I just can’t get aligned with the right-hand side edge of the container. I’ve add margin-right:300px; to the #top-navigation {} then yes it will move it over to the right. However, if you maximize the window that it doesn’t say in line with the container.
Your rule is cascading. all you need to do is override it on the next level.
#top-navigation li li a {text-decoration:none; }
ASIDE:
You could alter your original selector for underlining #top-nav>li a {text-decoration:none; }if you don’t mind having the underline appear for IE6 users. Then you wouldn’t have to override the rule as I suggested earlier.
This was a bit tricky. It’s because on "#top-nav li:hover,#top-nav li.sfhover" you set a text-decoration. Thus when you hover over and the dropdown appears, the LI is still being hovered.
To fix this, just remove that text-decoration rule on that and it’ll remove it :).
It’s because the #top-navigation is centered via margin:0 auto (I don’t even see the margin right rule on it??)
On #top-navigation, remove the margin:0 auto rule, and replace it with float:right. Then on #container, give that clear:both to clear from the navigation :).
<rant>
I have splitting headache right now and I feel so incredibly stupid/frustrated over this…argggg
</rant>
I tried removing the text-decoration: one from #top-nav li:hover,#top-nav li.sfhover but it wasn’t working the way I wanted it. Where do I put text-decoration: underline so that only the Home, Calendars, Newsletters, and Contact links will have an underline when hovering, while the links on the Calendars drop-down menu won’t have any underline at all.
I removed the margin: 0 auto; rule from the #top-navigation and I replaced it with float: right; then on the #container I added clear:both; but it’s still not aligning correctly with the container.
argggg 
I just started over by copying the code from my public site and pasting it into my test CSS file.
My test site can be found here and my CSS file can be found [URL=“http://covschool.org/stylesheet.php?cssid=61”]here.
Via your page. The top nav is aligning exactly like I wanted it to. Where is it supposed to be? I thought you wanted it on the right of hte page. You want it aligned with the right side of the container border? From my understanding? If so, put back the margin:0 auto on #top-navigation. Change the width to match the container (960px)
The purple background will now extend the full 960px. You can fix that by moving the background/border radius to the <ul> #top-nav
You’ll have to mess with little aesthetics to make it look good (padding) but it’s fine.
This next part about the underline is untested, though it should work (if it doesn’t, I’ll actually go through and do tests)
You have this.
[COLOR=#000000][FONT=Consolas]#[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]top-nav[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]li[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]hover[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]a[/FONT][/COLOR][COLOR=#000000][FONT=Consolas],[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]#top-nav li.sfhover a {[/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas] [COLOR=#C80000]color[/COLOR]: [COLOR=#07909A]yellow[/COLOR]; [COLOR=#007400]/* rollover text for the main menu */[/COLOR][/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas] [COLOR=#C80000]text-decoration[/COLOR]: [COLOR=#07909A]none[/COLOR];[/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas]}[/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas]
Make it this
#top-nav li:hover li a,
[/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas]#top-nav li.sfhover li a {[/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas] [COLOR=#C80000]color[/COLOR]: [COLOR=#07909A]yellow[/COLOR]; [COLOR=#007400]/* rollover text for the main menu */[/COLOR][/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas] [COLOR=#C80000]text-decoration[/COLOR]: [COLOR=#07909A]none[/COLOR];[/FONT][/COLOR]
[COLOR=#000000][FONT=Consolas]}
#top-nav li:hover a{text-decoration:underline;}[/FONT][/COLOR]
Edit-I hate this friggin editor. Those last two code blocks. Combine the rules. I don’t know WHY it’s separating the rules. Frustrating.
That was it Ryan! You are a CSS genius!
Major thanks! 
All sorted? Good :). Glad that’s all done with ;). You’re welcome.