....
<li><a href="whatever.html">Linky</a>
</li><li><a href="whatever.html">Linky</a>
...

#navigation li li a { display: inline-block; }
#navigation li li a { display: block; }

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 * Whatever:hover - V1.42.060206 - hover & active
 * ------------------------------------------------------------
 * (c) 2005 - Peter Nederlof
 * Peterned - http://www.xs4all.nl/~peterned/
 * License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 * Whatever:hover is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * Whatever:hover is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * Credits and thanks to:
 * Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 * howto: body { behavior:url("csshover.htc"); }
 * ------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
   onhover:{on:'onmouseover', off:'onmouseout'},
   onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
   if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
   window.attachEvent('onunload', unhookHoverEvents);
   var sheets = doc.styleSheets, l = sheets.length;
   for(var i=0; i<l; i++)
      parseStylesheet(sheets);
}
   function parseStylesheet(sheet) {
      if(sheet.imports) {
         try {
            var imports = sheet.imports, l = imports.length;
            for(var i=0; i<l; i++) parseStylesheet(sheet.imports);
         } catch(securityException){}
      }

      try {
         var rules = (currentSheet = sheet).rules, l = rules.length;
         for(var j=0; j<l; j++) parseCSSRule(rules[j]);
      } catch(securityException){}
   }

   function parseCSSRule(rule) {
      var select = rule.selectorText, style = rule.style.cssText;
      if(!csshoverReg.test(select) || !style) return;

      var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
      var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
      var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
      var affected = select.replace(/:(hover|active).*$/, '');
      var elements = getElementsBySelect(affected);
      if(elements.length == 0) return;

      currentSheet.addRule(newSelect, style);
      for(var i=0; i<elements.length; i++)
         new HoverElement(elements, className, activators[pseudo]);
   }

function HoverElement(node, className, events) {
   if(!node.hovers) node.hovers = {};
   if(node.hovers[className]) return;
   node.hovers[className] = true;
   hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
   hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
   function hookHoverEvent(node, type, handler) {
      node.attachEvent(type, handler);
      hoverEvents[hoverEvents.length] = {
         node:node, type:type, handler:handler
      };
   }

   function unhookHoverEvents() {
      for(var e,i=0; i<hoverEvents.length; i++) {
         e = hoverEvents;
         e.node.detachEvent(e.type, e.handler);
      }
   }

function getElementsBySelect(rule) {
   var parts, nodes = [doc];
   parts = rule.split(' ');
   for(var i=0; i<parts.length; i++) {
      nodes = getSelectedNodes(parts, nodes);
   }  return nodes;
}
   function getSelectedNodes(select, elements) {
      var result, node, nodes = [];
      var identify = (/\#([a-z0-9_-]+)/i).exec(select);
      if(identify) {
         var element = doc.getElementById(identify[1]);
         return element? [element]:nodes;
      }

      var classname = (/\.([a-z0-9_-]+)/i).exec(select);
      var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
      var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
      for(var i=0; i<elements.length; i++) {
         result = tagName? elements.all.tags(tagName):elements.all;
         for(var j=0; j<result.length; j++) {
            node = result[j];
            if(classReg && !classReg.test(node.className)) continue;
            nodes[nodes.length] = node;
         }
      }

      return nodes;
   }
</script>

This code comes from here: http://www.xs4all.nl/~peterned/csshover.html

Now at the bottom of your stylesheet add this:

body { behavior:url("csshover.htc");   }

Making sure the path to the file from the stylesheet is correct - i.e. in this case it's in the same directory (in the example I've got all the rules in the document head).

And that's it.

The example will look a little odd because I've stuck all your CSS rules into the document head so all the paths to the images etc will be off - so ignore that.

_____________________________

Little Blue Plane Web Design | Land Rover project

(in reply to Scotty)

quote:

Secondly, to make the dropdowns drop down in IE6 and under, copy the following code into a blank page of Notepad or whatever and save it as csshover.htc

#navigation li li a:link { padding: 0 18px 0 .4em }

#navigation li li a padding: 0 18px 0 .4em }

quote:

#navigation li li a:link { padding: 0 18px 0 .4em }

#navigation li li a { padding: 0 18px 0 .4em }

#navigation li li a:link { padding: 0 18px 0 .4em }

<!--[if lt IE 7]>
<style type="text/css">
body {behavior: url(/media/css/csshover.htc);}
</style>
<![endif]-->