Thu, 2010-07-15 14:16
Hi,
Just joined CSS Creator, which looks like the ideal place to be for a middle aged fellow like me trying to master CSS. Lots to look at, so if I may, I will post my problem and then get browsing!!!!
I am trying my hand at flyout menus, but have still not 'got my head around' how the coding works exactly. I am nearly there, but I am just waiting for that 'eureka' moment where it all falls into place, I hope!!!
That said, I am working on a flyout menu which works fine if I only have one flyout column set up. The difficulty I am having is getting a second column to extend out from the first column. Make sense?
It may be just a simple matter of adding a couple of ul's and li's in the right place of the CSS, but I cannot figure it out after spending quite a few hours trying to make it work. The code below is what I am working on, of which the html section allows for a second flyout menu to appear when hovering over the 'Pic One' link inside the 'Gallery'.
Apologies now if I have done this wrong. I did check the guidelines, but I may have overlooked some things. Any help on this would be most appreciated, and even any improvements on the code are also welcome.
Many thanks,
Steve Meakin
#navbar {
position: absolute;
top: 100px;
left: 100px;
margin: 0;
padding: 0;
}
#navbar li {
list-style-type: none;
}
#navbar li a {
display: block;
width: 100px;
line-height: 40px;
text-transform: uppercase;
text-decoration: none;
color: #666;
font-size: 12px;
text-align: left;
font-weight: bold;
}
#navbar li a:hover {
color: #666;
}
#navbar li ul {
display: none;
margin: 0;
padding: 0;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
left: 100%;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #666;
font-size: 10px;
font-weight: bold;
position: relative;
top: -40px;
}
#navbar li li a:hover {
color: #000;
}
VH - SCMWebdesign
Thu, 2010-07-15 14:25
#1
Apologies, code not inside tags
Sincere apologies, first blip. I did not put the code inside the code tags. Here it is.
Cheers,
Steve.
#navbar { position: absolute; top: 100px; left: 100px; margin: 0; padding: 0; } #navbar li { list-style-type: none; } #navbar li a { display: block; width: 100px; line-height: 40px; text-transform: uppercase; text-decoration: none; color: #666; font-size: 12px; text-align: left; font-weight: bold; } #navbar li a:hover { color: #666; } #navbar li ul { display: none; margin: 0; padding: 0; } #navbar li:hover ul, #navbar li.hover ul { display: block; position: absolute; left: 100%; } #navbar li:hover li a, #navbar li.hover li a { color: #666; font-size: 10px; font-weight: bold; position: relative; top: -40px; } #navbar li li a:hover { color: #000; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>VH - SCMWebdesign</title> <link rel="stylesheet" type="text/css" href="styleV.css" /> </head> <body> <ul id="navbar"> <li><a href="#">Gallery</a> <ul> <li><a href="#">Pic One</a></li> <ul> <li><a href="#">happy</a></li> <li><a href="#">sad</a></li> <li><a href="#">fun</a></li> </ul> <li><a href="#">Pic Two</a></li> <li><a href="#">Pic Three</a></li> </ul> </li> <li><a href="#">Design</a> <ul> <li><a href="#">Baths</a></li> <li><a href="#">Kitchens</a></li> <li><a href="#">Beds</a></li> </ul> </li> <li><a href="#">Branches</a> <ul> <li><a href="#">Cambs</a></li> <li><a href="#">Beds</a></li> <li><a href="#">Hunts</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">Phone</a></li> <li><a href="#">Email</a></li> <li><a href="#">Post</a></li> </ul> </li> </ul> </body> </html>