سوالی در مورد منو

[MoReNu 12]

سلام دوستان

سوالی که در مورد منو داشتم این هست که فرض کنید این منویی که من توی این سایت طراحی کردم: http://sitaco.co/

زیر نوار خاکستری رنگ که منو درونش قرار داره یک نوار دیگه تعبیه کنم و می خوام که وقتی بر روی منو هاور شد زیر منوهاش بر روی نوار دوم نمایش داده بشن و وقتی هم اگه زیر منو، زیر منو داشت مثل حالت عادیش که الان هست باز بشه

دقیقا عین سایت http://p30download.com

حالا می خواستم نحوه استایل دادن اینطوری رو بدونم

ممنون می شم کمکم کنید.

با تشکر

[Black_Sky 6349]

اين هم نمونه كد:

<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>