Ok.
I’ve tried to use the css example you gave me and have come up with this so far:
http://www.lakeshoreproducts.com/barbara/nav2.html
What I CAN’T figure out is how to change the width of the second level of submenus (not sure what you call these). For example the submenu that come out when you click on “Lifts” and “Dock Systems” (under “PRODUCTS”). Right now they are the same width as the top nav items, which when they appear end up looking like they are under the “OWNERS” section.
Now sure if I’m explaining this right.
Please let me know how to change this if you will.
Here is the css I have:
#nav {
/* [disabled]background-color: #FC9; /
/ [disabled]height: 300px; */
width: 960px;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:240px;
background-color: #79cdd1;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left:-999em;
}
#nav li li{
width:240px;
}
#nav li ul ul{
position: absolute;
left:100%;
top: -.1em;
margin-left:-999em;
}
/* Styles for Menu Items /
ul#nav li a {
display: block;
text-decoration: none;
color: #FFF;
/ [disabled]background: #79cdd1; /
zoom:1.0;
border-right-width: 1px;
border-right-style: solid;
/ [disabled]border-right-color: #F00; /
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 14px;
height: 20px;
padding-top: 70px;
padding-right: 15px;
padding-bottom: 10px;
text-align: right;
letter-spacing: 0.5pt;
/ [disabled]border-bottom-width: 1px; /
/ [disabled]border-bottom-style: solid; */
width: auto;
}
/* this sets all hovered lists to red /
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
/ [disabled]color: #666; /
background-color: #7bafde;
/ [disabled]width: 180px; /
}
/ set dropdown to default /
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #333;
background-color: #FFFFFF;
text-align: left;
font-size: 12px;
border: thin solid #cccccc;
letter-spacing: normal;
height: 15px;
}
#nav li ul li a {
padding: 4px 5px;
} / Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}