Buenos días, me presento,
soy un principiante con codigo CSS y HTML por lo tanto entiendo muy poco, pero me atreví a crear una página para la fundación con la que laboro, y ya tengo todas las ideas claras, solo necesito poner un menu horizontal que tenga al menos 2 submenus, he encontrado algunas, pero como uso Blogger para la página no me han servido varios, porfín encontré uno, obviamente le cambiaré las imágenes, pero principalmente necesito cuadrarlo, les dejo el link para que vean cómo está
[URL="http://www.geadespierta.com"]http://www.geadespierta.com[/URL]
Necesito cambiar ese menú azul en la posición donde está el verde, pero no he podido aún, también quiero dejarlos en línea, no con esa forma tan rara que tiene, y por último quisiera cambiarle el fondo a los submenues, será que me podrían ayudar con todas estas cosas?? Por favor!
Aqui les dejo el código CSS junto con el scrip
.preload1 {background: url(http://i1104.photobucket.com/albums/h323/mccid1/blank_over.gif);}
.preload2 {background: url(http://i1104.photobucket.com/albums/h323/mccid1/blank_overa.gif);}
#nav {padding:0; margin:0; list-style:none; height:0px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i1104.photobucket.com/albums/h323/mccid1/blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(http://i1104.photobucket.com/albums/h323/mccid1/blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(http://i1104.photobucket.com/albums/h323/mccid1/blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(http://i1104.photobucket.com/albums/h323/mccid1/blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(http://i1104.photobucket.com/albums/h323/mccid1/blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(http://i1104.photobucket.com/albums/h323/mccid1/blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff; background: url(http://i1104.photobucket.com/albums/h323/mccid1/blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(http://i1104.photobucket.com/albums/h323/mccid1/blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(http://i1104.photobucket.com/albums/h323/mccid1/blank_overa.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(http://i1104.photobucket.com/albums/h323/mccid1/arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(http://i1104.photobucket.com/albums/h323/mccid1/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(http://i1104.photobucket.com/albums/h323/mccid1/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
Y Aqui les dejo el HTML por si es necesario
<script src="pro_drop_1/stuHover.js" type="text/javascript"></script>
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Cameras</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li class="mid"><a href="#nogo7" class="fly">Lenses</a>
<ul>
<li><a href="#nogo8">Wide Angle</a></li>
<li><a href="#nogo9">Standard</a></li>
<li><a href="#nogo10">Telephoto</a></li>
<li><a href="#nogo11" class="fly">Zoom</a>
<ul>
<li><a href="#nogo12">35mm to 125mm</a></li>
<li><a href="#nogo13">50mm to 250mm</a></li>
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="#nogo15">Mirror</a></li>
<li><a href="#nogo16" class="fly">Non standard</a>
<ul>
<li><a href="#nogo17">Bayonet mount</a></li>
<li><a href="#nogo18">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo19">Flash Guns</a></li>
<li><a href="#nogo20">Tripods</a></li>
<li><a href="#nogo21">Filters</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="#nogo23">Printing</a></li>
<li><a href="#nogo24">Photo Framing</a></li>
<li><a href="#nogo25">Retouching</a></li>
<li><a href="#nogo26">Archiving</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#nogo28">Support</a></li>
<li><a href="#nogo29" class="fly">Sales</a>
<ul>
<li><a href="#nogo30">USA</a></li>
<li><a href="#nogo31">Canadian</a></li>
<li><a href="#nogo32">South American</a></li>
<li><a href="#nogo33" class="fly">European</a>
<ul>
<li><a href="#nogo34" class="fly">British</a>
<ul>
<li><a href="#nogo35">London</a></li>
<li><a href="#nogo36">Liverpool</a></li>
<li><a href="#nogo37">Glasgow</a></li>
<li><a href="#nogo38" class="fly">Bristol</a>
<ul>
<li><a href="#nogo39">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul>
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul>
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
</ul>
</li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul>
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul>
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li></ul>
(No sé cómo meter ese código en las casillas para que se vea más estético, perd
on)
Bueno, espero que me puedan ayudar, llevo como 1 semana intentando y cambiando y se supone que esta página la debería entregar dentro de unos pocos días....
Muchísimas gracias de antemano a todos, espero muy pronto sus respuestas,
Saludos!
