Drop down menu med farver?

Prøv at se om du kan finde noget her: http://www.scriptsearch.com/JavaScript/Scripts/Navigation/. Der er så mange at vælge imellem, at det er bedst at du selv ser dem igennem. Ved at klikke på et script og derefter vælge programmørens hjemmeside, kan du se et eksempel på menuen.

Du kan da bare sætte farver på dine options (hvis det er en select, jeg kunne ikke se siden !-)

<select style="font-family:verdana,sans-serif;color:white;">
  <option style="color:black;">-- Vælg --</option>
  <option value="værdi1" style="background:blue">Værdi 1</option>
  <option value="værdi2" style="background:red">Værdi 2</option>
  <option value="værdi3" style="background:#345">Værdi 3</option>
  <option value="værdi4" style="background:coral">Værdi 4</option>
</select>

> roenvig

Det er ikke en select, men en link menu.

Jeg mener jeg fik nedenstående fra en nyhedsgruppe.


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
[ <!ELEMENT a (#PCDATA | table)* > ]>
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
< head>
< meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
< title> Drop Down Menu </title>
< style type="text/css">
body {font-size:1%; color:#fff;} /*get rid of the IE bug that prints the the end of the !doctype */
.menu {display:none;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
< /style>

<!--[if IE]>
  <style type="text/css">
  /*<![CDATA[*/
.holder {display:none;}
.menu {display:block;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
  /*]]>*/
  </style>
<![endif]-->

< /head>

< body>
< div class="menu">
< a class="outer" href="page1.html">MENU 1
< table><tr><td>
< a class="inner" href="page1a.html">Page 1a</a>
< a class="inner" href="page1b.html">Page 1b</a>
< a class="inner" href="page1c.html">Page 1c</a>
< a class="inner" href="page1d.html">Page 1d</a>
< a class="inner" href="page1e.html">Page 1e</a>
< /td>< /tr>< /table>
< /a>

< a class="outer" href="page1.html">MENU 2
< table><tr><td>
< a class="inner" href="page2a.html">Page 2a</a>
< a class="inner" href="page2b.html">Page 2b</a>
< a class="inner" href="page2c.html">Page 2c</a>
< a class="inner" href="page2d.html">Page 2d</a>
< /td>< /tr>< /table>
< /a>
< /div>

< div class="holder">
MENU 1<br />
< a class="inner" href="page1a.html">Page 1a</a>
< a class="inner" href="page1b.html">Page 1b</a>
< a class="inner" href="page1c.html">Page 1c</a>
< a class="inner" href="page1d.html">Page 1d</a>
< a class="inner" href="page1e.html">Page 1e</a>
< /div>
< div class="holder">
MENU 2<br />
< a class="inner" href="page2a.html">Page 2a</a>
< a class="inner" href="page2b.html">Page 2b</a>
< a class="inner" href="page2c.html">Page 2c</a>
< a class="inner" href="page2d.html">Page 2d</a>
< /div>

< /body>
< /html>

....og det virker :-)