Mam kody do rozwijanego menu w dół i w lewo oto one:

Lewe kod:

[HTML] pobierz, plaintext 
<style>
body { behavior: url(qw.htc);} 
 
#menu {width:100px; position: relative; margin-bottom:3px}
#menu #tytul {background-image: url('1.bmp'); width:100px; height:21px;}
#menu #tytul2 {position:absolute; top:0px; visibility:hidden; background-image: url('2.bmp'); width:103px; height:21px;}
#menu #lista {position:absolute; top:0px; left:103px; visibility:hidden;}
#menu #tytul, #tytul2, a {background-repeat: no-repeat;}
#menu a {display:block; width:100px; height:21px; background-image: url('forum.bmp'); margin-bottom:3px;}
#menu:hover #lista {visibility:visible;}
#menu:hover #tytul2 {visibility:visible;}
</style>
 
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a href=#></a>
<a></a>
<a></a>
<a></a>
</div></div>
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a></a>
<a></a>
<a></a>
<a></a>
</div></div>
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a></a>
<a></a>
<a></a>
<a></a>
</div></div>
<div id='menu'>
<div id='tytul'></div>
<div id='tytul2'></div>
<div id='lista'>
<a></a>
<a></a>
<a></a>
<a></a>
</div></div>
[HTML] pobierz, plaintext 

Dolne kod:

[HTML] pobierz, plaintext 
<style>
body { behavior: url(qw.htc);} 
 
div {width:100px;}
div a {display:block; border:1px solid black; width:100px; text-align:center;}
div p {margin:0px; visibility:hidden; position:absolute;}
 
div #menu {font-weight:600}
div #lista {margin-top:3px;}
 
div:hover p {visibility:visible;}
 
</style>
 
<div>
<a id='menu'>Menu</a>
<p>
<a id='lista'>qwqw</a>
<a id='lista'>qwqw</a>
</p>
</div>
[HTML] pobierz, plaintext 

Są to moje projekty a wiec udostępniam je, starałem się by działały pod najważniejszymi przeglądarkami i działają z wyjątkiem ie lecz i na to znalazłem sposób kod JS który już nie jest moim autorstwem kod:

[HTML] pobierz, plaintext 
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
 
var currentSheet, doc = window.document, activators = {
 onhover:{on:'onmouseover', off:'onmouseout'},
 onactive:{on:'onmousedown', off:'onmouseup'}
}
 
function parseStylesheets() {
 var sheets = doc.styleSheets, l = sheets.length;
 for(var i=0; i<l; i++) 
  parseStylesheet(sheets[i]);
}
 function parseStylesheet(sheet) {
  if(sheet.imports) {
   try {
    var imports = sheet.imports, l = imports.length;
    for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
   } 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(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).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.*$/, '');
  var elements = getElementsBySelect(affected);
 
  currentSheet.addRule(newSelect, style);
  for(var i=0; i<elements.length; i++)
   new HoverElement(elements[i], className, activators[pseudo]);
 }
 
function HoverElement(node, className, events) {
 if(!node.hovers) node.hovers = {};
 if(node.hovers[className]) return;
 node.hovers[className] = true;
 node.attachEvent(events.on,
  function() { node.className += ' ' + className; });
 node.attachEvent(events.off,
  function() { node.className = 
   node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
 
function getElementsBySelect(rule) {
 var parts, nodes = [doc];
 parts = rule.split(' ');
 for(var i=0; i<parts.length; i++) {
  nodes = getSelectedNodes(parts[i], nodes);
 } return nodes;
}
 function getSelectedNodes(select, elements) {
  var result, node, nodes = [];
  var classname = (/\.([a-z0-9_-]+)/i).exec(select);
  var identify = (/\#([a-z0-9_-]+)/i).exec(select);
  var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
  for(var i=0; i<elements.length; i++) {
   result = tagName? elements[i].all.tags(tagName):elements[i].all; 
   for(var j=0; j<result.length; j++) {
    node = result[j];
    if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
     classname[1] + '\\b').exec(node.className)))) continue;
    nodes[nodes.length] = node;
   }
  } return nodes;
 }
</script>
[HTML] pobierz, plaintext 

Trzeba go zapisać jako plik "qw.htc".

WAŻNE NIE POZWALAM SIĘ PODPISWAĆ POD AUTORSTWEM TEGO SKRYPTU!!

Może przydadzą się komuś łatwo je edytować...

Menu nie tworzy się na znacznikach div lub p, bardziej do tego odpowiednie są listy. A to rozwiązanie nie jest takie doskonałe, w sieci pełno lepszych przykładów.

P.S. Zauważyłem, że wykorzystujesz na tła pliki .bmp, to nie format do sieci, za duży. Najlepsze rozwiązanie to .png, odpowiednio zoptymalizowany.

Ach co do grafiki to tylko przykład..
A co do li i ui to też nie jest najlepszy przykład ponieważ jest duży problem do dopasowania wglądu w wszystkich przeglądarkach i w nie których nie wgląda to najlepiej.

Zamieściłem jak komuś się przyda to niech sobie weźmie a jak nie to nie...