#
April 16, 2013 at 12:26 pm
I have a made my main navigation horizontal and want to have the li.subNav display horizontally also but it’s not working and I don’t know why. I have tried display: inline and float left but maybe I need to do this with a different css rule. Please help I know it must be simple but have spent hours to no avail. Thanks, H
And here is the css
#nav {
height: 50px;
position:absolute;
left: 200px;
top:0px;
margin-left: 00px;
padding-top: 50px;
padding-right: 0;
padding-bottom: 0;
padding-left: 300px;
}
#nav ul {
margin:0;
padding:0;
list-style: none;
height:1.5 ems;
}
#nav ul li{
float: left;
font:1em/1.5em Arial, Helvetica, sans-serif;
width: 100px;
text-align:left;
border-right:1px solid #CCC;
padding-right: 25px;
padding-left: 5px;
}
#nav ul li a {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
margin-left: 10px;
margin-right: 10px;
}
#nav ul a:link, #nav ul a:visited {
color:#424242;
text-decoration:none;
}
#nav ul a:hover, #nav ul a:active {
color:#069;
text-decoration:none;
display:inline;
}
#nav li.subNav ul {
display: none;
}
#nav li.subNav:hover ul {
display: inline;
padding: 0;
float: left;
display:inline;
}
#nav li.subNav ul li {
height: 1.2 em;
background-color: #FFC;
padding: 3px 0 3px 5px;
text-align:left;
float:left;
clear:both;
}
#nav li.subNav:hover ul li a {
Color:#00F;
font-size:.75em;
float:left;
padding:0;
}
#Nav li.SubNav {
float: left;
}
