Amigos buenas tardes necesito de su ayuda, tengo un menu en css desplegable vertical, el despliegue de las opciones es de forma vertical, el problema es que quisiera que la parte principal quedara expandida al momento de cargar la pagina, y no como lo hace actualmente con la propiedad hover, aqui esta el codigo:
CSS:
#info {height:400px; position:relative;}
#menuOuter {padding:0 0 10px 0; margin:0; list-style:none; width:201px; background: #000 url(rad2.png) no-repeat left bottom; position:absolute; z-index:500; left:10px; font-family:arial, sans-serif;}
#menuOuter li#menu1 {float:left; width:201px;}
#menuOuter table {border-collapse:collapse; padding:0; margin:0; width:0; height:0; margin:-1px -4px -1px -4px;}
#menuOuter li#menu1 a#menuLink {display:block; padding:10px 0 0 0; margin:0; background:url(rad3.png) no-repeat left top; height:18px; width:201px; text-align:center; font-size:12px; font-family:arial, sans-serif; color:#fff; font-weight:bold; text-decoration:none;}
#menuOuter ul {position:absolute; left:0; top:0; padding:0; margin:0; list-style:none; height:0; overflow:hidden;}
#menuOuter li#menu1 a#menuLink:hover {border:0; color:#fc6;}
#menuOuter :hover ul{
position:relative; top:0;
height:auto; overflow:visible;
padding:0 10px; margin:0;
list-style:none; width:181px;
}
#menuOuter :hover ul ul {position:absolute; top:67px; height:0; overflow:hidden;}
#menuOuter :hover ul li a {display:block; padding:0; margin:0; width:181px; height:37px; background:url(dl-slide3/back3.png) no-repeat left top; color:#ddd; text-align:center; line-height:37px; cursor:pointer; font-weight:bold; text-decoration:none;}
#menuOuter :hover ul :hover {background-position:left -37px;}
#menuOuter :hover ul li:hover > a {background-position:left -37px;}
#menuOuter :hover ul li {float:left;}
#menuOuter :hover ul :hover ul {position:relative; height:156px; overflow:visible; width:181px; padding:0; margin:0; background:#eee url(dl-slide3/shade.png) no-repeat top left; text-align:center; width:181px; top:0; cursor:default;}
#menuOuter :hover ul :hover ul li a {background:transparent; height:25px; line-height:25px; color:#666; border-bottom:1px solid #aaa; font-weight:normal; font-size:11px;}
#menuOuter :hover ul :hover ul li a:hover {color:#000;}
div#background {width:700px; height:465px; background:url(black.jpg);}
HTML:
<div id="info">
<ul id="menuOuter">
<li id="menu1"><a id="menuLink" href="#">MENU SETI<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#link">HOME</a></li>
<li><a href="#link">PRIVACY POLICY</a></li>
<li><a href="#url">SALES<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Digital SLR Cameras</a></li>
<li><a href="#nogo">Interchangeable Lenses</a></li>
<li><a href="#nogo">Flash Guns and Accessories</a></li>
<li><a href="#nogo">Professional Tripods</a></li>
<li><a href="#nogo">Filters & Lens Hoods</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">SERVICES<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Printing & Framing</a></li>
<li><a href="#nogo">Photo Editing</a></li>
<li><a href="#nogo">Storage & Backup</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">CONTACTS<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Support</a></li>
<li><a href="#nogo">Sales</a></li>
<li><a href="#nogo">Buying</a></li>
<li><a href="#nogo">Photographers</a></li>
<li><a href="#nogo">Stockist</a></li>
<li><a href="#nogo">General</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">STORES LOCATION<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South West Region</a></li>
<li><a href="#nogo">North East Region</a></li>
<li><a href="#nogo">Central Region</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">CONTACT US<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Email Addresses</a></li>
<li><a href="#nogo">By Post</a></li>
<li><a href="#nogo">Telephone Numbers</a></li>
<li><a href="#nogo">Facsimile</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div> <!-- end of info -->
