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.