- This topic is empty.
-
AuthorPosts
-
April 16, 2013 at 12:26 pm #44151
helios
MemberI 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
- Home
- About
- Services…
- Film Production
- Corperate/ Business
- Community
- Live Events Filming
- Consultancy
- Duplication/ Replication
- Portfolio…
- Contact
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;
}April 16, 2013 at 1:06 pm #131982Paulie_D
MemberSo you don’t want the subnav items to vertically but rather all along the same level
Like this? http://codepen.io/Paulie-D/pen/488842da8d7807b7b924d0b5637589d3
You can ignore the JS…it’s not essential/
April 16, 2013 at 1:14 pm #131984helios
MemberYes exactly like that! Thanks for answering. I will take a look at the code and see how it fits into what I already have.
Glad I can ignore JS, not learnt that yet.
April 16, 2013 at 4:20 pm #131994helios
MemberGreat fixed it, thanks Paulie!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.