View Single Post
  #2 (permalink)  
Old March 7th, 2012, 04:13 PM
JackHerr JackHerr is offline
Authorized User
Points: 108, Level: 2
Points: 108, Level: 2 Points: 108, Level: 2 Points: 108, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2007
Location: North Salem, NY, USA.
Posts: 23
Thanks: 3
Thanked 0 Times in 0 Posts
Default

I fixed it with a clear and by applying float to both the li and a. Also, with the elements for the menu and submenu now touching, the hover allows one to move into the ul displayed upon hover for submenu navigation, without any javascript:

Code:
#HeaderNavigationSection {
 background-color: #D4D4D4;
 height: 30px;
}
#HeaderNavigationMenu {
 float: right;
}
#HeaderNavigationMenu li {
 position: relative;
 display: inline;
 float: left;
}
#HeaderNavigationMenu li a {
 margin: 8px 0px 10px 0px;
 padding: 0px 10px 0px 10px;
 border-left-width: 1px;
 border-style: dotted;
 border-color: #808080;
 text-decoration: none;
 float: left;
}
#HeaderNavigationMenu li:first-child a {
 border: none;
}
#HeaderNavigationMenu li a:hover {
 color: #003366
}
#HeaderNavigationMenu li ul {
 clear: both;
 position: absolute;
 float: left;
 top: 30px;
 right: 0px;
 background-color: #FFFFFF;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 10px 0px;
 border: 1px black solid;
 display: none;
}
#HeaderNavigationMenu li ul a {
 float: left;
 border: none;
}
#HeaderNavigationMenu li:hover ul {
 display: block;
}