nav _ css

[pcmagic]

Hey Folks just wondering if anybody could help a little here please, From this css code below, How Can i get so that navcontainer is blue but with a red when you hover over it???? Also With the text in the navcontainer having a small 1px red border around it??? The Drop Down part of this .navcontainer what part do i change so that on the drop down part alone is white with a small black border and blue text???

Any help and guidelines would be very appreciated,

Thanks

.foot {
	COLOR: #F99007;
	FONT-FAMILY: sans-serif;
	FONT-SIZE: 12px;
}
.foot a:link, .foot a:visited, .foot a:active {
 color: #F99007;
 text-decoration: none;

}
.foot a:hover {
 color: #0B6295;
 text-decoration: none;

}
.navcontainer
{
width: 10em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

.navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

.navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
float: left;
width: 10em;
}

.navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body .navcontainer li a { width: auto; }

.navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

.navcontainer li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

.navcontainer li:hover ul {
	left: auto;
}

.navcontainer li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#navcontainer A:hover, #navcontainer A:active { background: #E32636; }

 

[pcmagic]

pretty pretty please lol

 

[root]

Sorry, must have missed this one.
I think i see what you are saying, but I'm not convinced that it can be done with what I assume your current code set up is, I'm assuming that you have something like this.

<div id=navcontiner class=navcontainer>
  <ul>   
    <li><a href=home.html>home</a></li>
    <li><a href=#>galleries</a>
    <ul>
      <li><a href=gallery1.html>gallery 1</a></li>
      <li><a href=gallery2.html>gallery 2</a></li>
      <li><a href=gallery3.html>gallery 3</a></li>
    </ul>
    <li><a href=sitemap.html>sitemap</a></li>
  </ul>
</div>

all the menu and submenus are in the same class...

so I suggest you change the code to

<div id=navcontiner class=navcontainer>
  <ul>   
    <li><a href=home.html>home</a></li>
    <li><a href=#>galleries</a>
    <ul class=navsubmenu>
      <li class=navsubmenu><a href=gallery1.html>gallery 1</a></li>
      <li class=navsubmenu><a href=gallery2.html>gallery 2</a></li>
      <li class=navsubmenu><a href=gallery3.html>gallery 3</a></li>
    </ul>
    <li><a href=sitemap.html>sitemap</a></li>
  </ul>
</div>

and have a new class with the style that you want attached to the individual submenu items.

I don't really think there is a lot more that can be said,
I mean I had to guess the code that you had, I mean I don't know if your menus are static, folding slidding, done with javascript or Css