Thread: Display wordpress categories in a horizontal drop down menu! (so easy don't miss)

<div style="text-align:center;">
    <ul id="menu" style="padding:0; margin:0;">
        <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
    </ul>
</div>

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	font-size:1.2em;
}
	
ul#menu li {
	float: left;
	padding: 0;
	margin: 0;
	border-right:solid 1px #fff;
}
	
ul#menu ul li {
	float: none;
	position: relative;
	border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
	border-left: 1px solid #FFF;
	z-index:1000;
}
	
ul#menu li ul {
	margin: 0;
	padding: 0;
	display:none;
	list-style: none;
	position: absolute;
	background: #9CC;
}
ul#menu ul ul{
	margin-left: .2em;
	position: absolute;
	top: 0; /* if using borders, -1px to align top borders */
	left: 100%;
}
	
ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}
	
ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
	display: block;
	padding: .2em .3em;
	text-decoration: none;
	background: #5587B3;
	 color: #FFFFFF;
}
	
	
ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
	width: 8em;
}

<script type="text/javascript">
 /*<![CDATA[*/

var mbA,mbT,mbTf,mbSf;
var mbR = [];

function mbSet(m) {
if (document.getElementById&&document.createElement) {
	var m=document.getElementById(m);
	mbR[mbR.length] = m;
	var i;

	e=m.getElementsByTagName('a');
	if (!mbTf) mbTf=new Function('mbHT();');
	if (!mbSf) mbSf=new Function('mbS(this);');
	for (i=0;i<e.length;i++) {
		e[i].onmouseout=e[i].onblur=mbTf;
		e[i].onmouseover=e[i].onfocus=mbSf;
	}

	m=m.getElementsByTagName('ul');
	for (i=0;i<m.length;i++) {
		mbH(mbL(m[i]));
	}
}}

function mbHA() {
	if (mbA) {
		while (mbA) mbH(mbA);
		mbHE('block');
	}
}

function mbHT() {
	if (!mbT) mbT=setTimeout('mbHA();', 0);
}

function mbTC() {
	if (mbT) {
		clearTimeout(mbT);
		mbT=null;
	}
}

function mbS(m) {
	mbTC();
	if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
	else mbHE('none');

	if (mbM(m)) {
		mbSH(m,'block');
		mbA=m;
	}
}

function mbH(m) {
	if (m==mbA) mbA=mbP(m);
	mbSH(m,'none');
	mbT=null;
}

function mbL(m) {
	while (m && m.tagName != 'A') m = m.previousSibling;
	return m;
}

function mbM(l) {
	while (l && l.tagName != 'UL') l = l.nextSibling;
	return l;
}

function mbP(m) {
	var p = m.parentNode.parentNode;
	if (p.tagName == 'UL') {
		var i = 0;
		while (i <mbR.length) {
			if (mbR[i] == p) return null;
			i++;
		}
	} else {
		return null;
	}
	return mbL(p);
}

function mbSH(m,v) {
	m.className=v;
	mbM(m).style.display=v;
}

function mbHE(v) {
	mbHEV(v,document.getElementsByTagName('select'));
}

function mbHEV(v,e) {
	for (var i=0;i<e.length;i++) e[i].style.display=v;
}
/*]]>*/
</script>