CSS Flyout Menu

[AaronL]

Hi everyone, I'm new to CSS so I really don't have a great grasp on it yet. I'm trying to make a flyout menu for product categories and this is the styling I came up with so far:

#flyout {
    width: 175px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #c0c0c0;
    color: #000000;
    font: 12px Arial, sans-serif;
}
 
#flyout li {
    display: block;
    width: 100%;
}
 
#flyout li a {
    display: block;
    height: 100%;
    padding: 5px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}
 
#flyout li a:hover {
    background: #808080;
    color: #FFFFFF;
    background-image:url(images/arrow.gif);
  background-repeat:no-repeat;
  background-position:160px 7px;
}
 
/* Position the submenu relative to the main menu */
#flyout li.sub { position: relative; 
    background-image:url(images/arrow.gif);
  background-repeat:no-repeat;
  background-position:160px 6px; }
 
/* Set the style of the sub menu and hide it */
#flyout li.sub ul {
    margin: 0;
    padding: 0;
    border: 2px solid gray;
    border-style: groove;
    width: 175px;
    list-style: none;
    font: 100% Arial, sans-serif;
    background: #c0c0c0;
    color: #000000;
    position: absolute;
    left: -1000em;
} 
 
/* Show the submenu */
#flyout li.sub:hover ul { top: 0; left: 175px; }
 

Here is the example of the HTML I'm putting together

      <ul class="flyout">
      <li class="sub">
      <a href="index.php?scat=4">Demo Category</a>
      <ul>
        <li>
          <a href="index.php?scat=10">Another Demo Child</a>
        </li>
        <li>
          <a href="index.php?scat=5">Demo Child Category</a>
          <ul>
          <li>
            <a href="index.php?scat=11">Demo Grandchild</a>
          </li>
          </ul>
        </li>
      </ul>
      </li>
      </ul>
 

That works great if you only want to go one level down in categories, but I want to be able to go further down than that, and if you take a look at http://www.ecommphppro.com/maincode You'll see that it expands all levels when I only want to do one at a time, I also would only like the arrow graphic to appear when there are sub-categories. CSS seems to be confusing to me, can anyone shed some light on this for me? Thanks...

[Dormilich]

you may want to check out HTMLDog's article about the Suckerfish Dropdown (which is what you seem to do)

[AaronL]

Here are the CSS styles and HTML code I came up with that works great:

CSS Styles:

/* Flyout category menu */
#flyout {width:175px; position:relative;}
 
  /* Default list menu styles */
  #flyout ul {margin:0; 
  padding:0;
  list-style:none; 
  white-space:nowrap; 
  text-align:left;
  background:#c0c0c0;}
 
  /* Hide all sub categories */
  #flyout ul ul {position:absolute; left:-9999px;}
 
  /* Style for all anchor tags */
  #flyout a {display:block; 
  font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:normal; font-size:0.7em; 
  color:#000000;
  white-space:pre-wrap; 
  line-height:20px; 
  text-decoration:none;
  padding:0 0 0 5px;
  width:170px;} 
 
  #flyout li a {}
 
  /* Add the arrow for categories that have children */
  #flyout li a.mnu {background:url(images/arrow.gif) no-repeat; background-position:165px 7px;}
 
  /* Styles for submenus */
  #flyout li a.submnu {background-color:#eeeeee;}
  #flyout li a.submnua {background:url(images/arrow.gif) no-repeat; background-position:165px 7px; background-color:#eeeeee;}
 
  /* Hover style for links in the menu */
  #flyout li:hover > a {background-color:#eeeeee; color:#000000; text-decoration:underline;}
 
  /* Shows first level of submenus */
  /* #flyout ul li:hover > ul {left:175px; margin-top:-23px; margin-left:-1px;}*/
  #flyout ul li:hover > ul {left:100%; position:absolute; margin-left:0px; margin-top:-20px; border:none;}
 
  /* Shows further submenus */
  #flyout a:hover ul,
  #flyout a:hover a:hover ul, 
  #flyout a:hover a:hover a:hover ul {left:100%;}
  #flyout a:hover ul ul, 
  #flyout a:hover a:hover ul ul {left:-9999px;}
 

HTML Code:

<div id="flyout">
 
<ul id="topmenu">
<li><a class="mnu" href="index.php?scat=4">Demo Category</a><ul>
<li><a class="submnu" href="index.php?scat=14">Demo 1</a></li>
<li><a class="submnu" href="index.php?scat=15">Demo 2</a></li>
<li><a class="submnu" href="index.php?scat=16">Demo 3</a></li>
<li><a class="submnu" href="index.php?scat=17">Demo 4</a></li></ul></li>
 
<li><a class="mnu" href="index.php?scat=7">Demo Category 2</a><ul>
<li><a class="submnu" href="index.php?scat=18">Demo 2-1</a></li>
<li><a class="submnu" href="index.php?scat=19">Demo 2-2</a></li>
<li><a class="submnu" href="index.php?scat=20">Demo 2-3</a></li>
<li><a class="submnu" href="index.php?scat=21">Demo 2-4</a></li></ul></li></ul>
 
</div>
 

[lgm001]

Hate to state the obvious, but what we need to point out is that it appears that the selectors in the CSS are incorrect...

# is used when you are selecting and ID'ed item...

so to select <div id="globbler"> you use #gobbler for CSS (and jquery).

In your question, you have the value

<ul class="flyout"> and then in the CSS selector, you use #flyout... these simply don't match. To match your css selector for class you need to use .flyout.

So, in your CSS, you need to change all the #flyout to .flyout to match you HTML, or change the class="flyout" to id="flyout" in the HTML.

[AaronL]

Thank you, CSS seems to be very confusing to me and I don't know why :(

[lgm001]

For most of us, one day it just "works out" like a light bulb turning on. In the mean time, I would suggest that you could look at some of the CSS sites for tutorials.