submenu horizontal

[belencruzp]

Hola chicos! Necesito vuestra ayuda con un submenu horizontal que ya tengo preparado pero que no me encaja con la celda que quiero. Tengo un menu con cinco items y en el segundo es donde se despliega el submenu pero éste en vez de desplegarse justo debajo del segundo item, lo hace justo debajo del tercero y me estoy volviendo loca, pues no consigo dónde está el error o qué es lo que me falta agregar. Os copio y pego los códigos:

Lo que quiero es que el submenu aparezca justo debajo del segundo item. Muchas gracias por todo de antemano!!!
Saludos,
b

HTML:

Código:

<div id="nav">	
	 
	 	<ul id="navbar">
			<li><a href="agencia.html">Agencia</a></li> 
			
			<li><a href="galeria_mujeres.html">Fotos</a>
					<ul id="fotos_menu">
						<li id="sub1"><a href="galeria_mujeres.html">Mujeres</a></li> 
						<li id="sub2"><a href="galeria_hombres.html">Hombres</a></li> 
						<li id="sub3"><a href="galeria_actores.html">Actores</a></li>
						<li id="sub4"><a href="galeria_actrices.html">Actrices</a></li>
						<li id="sub5"><a href="gente_pub.html">Gente publicitaria</a></li>
						<li id="sub6"><a href="galeria_ninos.html">Ni&ntilde;os</a></li>
						<li id="sub7"><a href="galeria_ninas.html">Ni&ntilde;as</a></li>
					</ul></li>   	
			<li><a href="#">Aspirantes</a></li> 
			
			<li><a href="aviso_legal.html">Aviso legal</a></li> 
			
			<li><a href="#">Contacto</a></li> 		
		</ul>
		
		</div>

CSS:

Código:

#nav {
	width:570px; 
	height:28px;
	margin-top:10px;
}

#navbar {
	width:570px; 
	position: absolute;
    margin: 0 auto;
	padding:0;
}

#navbar li {
    list-style: none;
    float: left;
	
}

#navbar li a {
    display: block;
    float:left;
    color:black;
    font-family: 'Josefin Sans', sans-serif;
	font-weight:bold; 
	font-size:16px;
    padding:5px 25px 5px 5px;
}

#navbar li a:hover {
    background-color:#eaeaea;
}
       
#navbar li ul {
	display: none;  
	margin:0;
	padding:0;
}

#navbar li ul a {
	width:auto;
	background-color:violet;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:bold; 
	font-size:13px;
    border:none;
	padding:5px 10px 5px 5px;
	float:left;
}

#navbar li ul a:hover {
    background-color:#eaeaea;
}

#navbar li:hover ul {
    position: absolute;
	display: inline;
    margin-top: 28px;
}

#navbar li:hover ul#foto_menu {
	left:auto;
}

[RafaRG]

creo que el fallo está en esta parte:
#navbar li:hover ul {
position: absolute;
display: inline;
margin-top: 28px;
}

al poner display:inline; le indicas que se muestre en la misma línea, osea, a continuación del "segundo item". como justo al lado está el "tercer item", el submenú no tiene más remedio que apilarse justo debajo. para solucionar esto, cambia el display por este: display:block;
espero que te sirva (a mí me ha funcionado)

[Kurassier]

Podrias probar con esto:

Index.html

Código HTML:

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menuAcordeon.js"></script>
 
<div id="menu">
<ul id="menuAcordeon">
    <li>
        <a href="#"> Categoria 1 </a>
        <ul>
            <li> <a href="#"> Opcion 1</a> </li>
            <li> <a href="#"> Opcion 2</a> </li>
            <li> <a href="#"> Opcion 3</a> </li>
            <li> <a href="#"> Opcion 4</a> </li>
        </ul>
    </li>
    
    <li>
        <a href="#"> Categoria 2 </a>
        <ul>
            <li> <a href="#"> Opcion 1</a> </li>
            <li> <a href="#"> Opcion 2</a> </li>
            <li> <a href="#"> Opcion 3</a> </li>
            <li> <a href="#"> Opcion 4</a> </li>
        </ul>
    </li>
    
    <li>
        <a href="#"> Categoria 3 </a>
        <ul>
            <li> <a href="#"> Opcion 1</a> </li>
            <li> <a href="#"> Opcion 2</a> </li>
            <li> <a href="#"> Opcion 3</a> </li>
            <li> <a href="#"> Opcion 4</a> </li>
        </ul>
    </li>
 
</ul>
</div>
 

CSS

Código CSS:

body {
  font-family: Italic, Comic Sans MS, sans-serif;
  font-size: 1.0em;
  background-color: cyan;
}
 
 
ul#menuAcordeon, ul#menuAcordeon ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 19em;
}
 
ul#menuAcordeon a {
  display: block;
  text-decoration: none;    
}
 
ul#menuAcordeon li {
  margin-top: 1px;
}
 
ul#menuAcordeon li a {
  background: #03D797;
  color: #2600FC;   
  padding: 0.5em;
-moz-border-radius: 90px;
-webkit-border-radius: 5px;
}
 
ul#menuAcordeon li a:hover {
  background: #D7B303;
  color: cyan;
}
 
ul#menuAcordeon li ul li a {
  background: #DF0101;
  color: #04B4AE;
  padding-left: 20px;
}
 
ul#menuAcordeon li ul li a:hover {
  background: ##8A2908;
  border-left: 5px #000 solid;
  padding-left: 15px;
}
 
 
#menu{
position: absolute;
left: 35%;
top: 9%;
}
 

menuAcordeon.js

Código Javascript:

function initMenu() {
  $('#menuAcordeon ul').hide();
  $('#menuAcordeon ul:first').show();
  $('#menuAcordeon li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menuAcordeon ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});
 

Los colores fueron puestos random, por asunto de ejemplo

[belencruzp]

Hola RafaRG, eres un sol!!!! La verdad es que estaba tan embotada que no podía ver más allá cuál era el problema. Un simple block y ya esta! Qué maravilla jejeje
Por otro lado, Kurassier, gracias por responder también y enviar una nueva opción. La probaré a ver qué tal y ver cómo queda por no dejar :P
Saludos a los 2!
b