1 reply [Last post]
steve100
Offline
newbie
UK
Last seen: 4 years 19 weeks ago
UK
Timezone: GMT+1
Joined: 2010-07-15
Posts: 2
Points: 3

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

steve100
Offline
newbie
UK
Last seen: 4 years 19 weeks ago
UK
Timezone: GMT+1
Joined: 2010-07-15
Posts: 2
Points: 3

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>