Border bottom de una div me aparece en top

Jor1980 · #1 (**permalink**) 01/05/2011, 05:53

Hola, tengo un problema que no se solucionar.
Mi documento tiene varias div, la principal es "wrapper", dentro de esta tengo otra div que es "navigationmenu" y dentro el "navigationmenu" un unorderlist.

Mi problema es que cuando intento poner un borde en la parte baja de la unorderlist del navigationmenu me sale en la parte alta.

El código css es este:

#navigationmenu ul{
margin:0px;
padding:0px;
line-height:30px;
border-bottom:5px #0F0 solid;
}

samplei · #2 (**permalink**) 01/05/2011, 16:30

Necesitamos todo tu html y css código para responder tu pregunta.

C2am · #3 (**permalink**) 01/05/2011, 20:18

O al menos un enlace.
Saludos y bienvenido

Jor1980 · #4 (**permalink**) 03/05/2011, 05:56

Al final solucioné ese tema poniendo la unorderlist dentro de una div y el border bottom se lo pongo a esa div.

Ahora me surge otro problemilla, no logro que al pasar el ratón por encima de los li de la ul me cambie el color de fondo de los li y además me muestre los elementos que cada li tiene asignado en una ul.

Os pongo el código:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Agente-Home</title>
<link href="MainStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
}
</style>
<link href="navigationmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

   <div id="headerdiv">
        <top header>
            <h1>Cabecero agente</h1>
        </top header>
    </div>
    


  <div id="navigationmenu">

    <ul>
          <li><a href="#">Seguros de Coche</a>
                  <ul>
                    <li><a href="#">P&#243;liza Básica</a></li>
                    <li><a href="#">P&#243;liza 7</a></li>
                    <li><a href="#">Nueva P&#243;liza 10</a></li>
                    <li><a href="#">P&#243;liza Líder</a></li>
                    <li><a href="#">P&#243;liza todo riesgo 100</a></li>
                </ul><!--end Seguros de Coche list--->
      </li>
          <li>Seguros de Moto</li>   
          <li>Seguros Generales</li>
             <li>Seguros de Salud</li>
             <li>Seguros de Vida</li>
             <li>Productos Bancarios        <!--end wrapper---></li>
        </ul>
  </div>
</div> 
</body>

Y el css:

Código PHP:

  @charset "utf-8";

#headerdiv{
    margin:0;
    padding:0;
    height:200px;
    background-color:#06F;
}

#navigationmenu {
    margin:0px;
    padding:0px;
    height:30px;
    background-color:#F00;
    border-bottom:#999 solid;
}

#navigationmenu ul{
    
    margin:0px;
    padding:0px;
    line-height:30px;
}


#navigationmenu li{
    margin:0;
    padding:0;
    display:inline;
    float:left;
    position:relative;
    margin:0px 10px;
}

#navigationmenu li:hover{
    backgorund-color:#FFF;
}

#navigationmenu ul ul a:hover{
    text-decoration:none;
    color:#000;
}


#navigatiomenu li a{
    text-align:center;
    text-decoration:none; 
    height:30px; 
    width:150px; 
    display:block;
}

#navigationmenu ul ul{
    position:absolute;
    visibility:hidden;
    top:30px;    
 }
 
#navigationmenu ul a:hover{
    visibility:visible;
    background-color:#F00;
}
</code>

samplei · #5 (**permalink**) 03/05/2011, 08:41

Tal vez puedes encontart ayuada aqui:
http://www.forosdelweb.com/f53/menu-3-niveles-908912/

Es sobre una navigación con 3 niveles pero no necesitas usar el tercer nivel.

Jor1980 · #6 (**permalink**) 03/05/2011, 16:05

He mirado el hilo pero no he logrado solucionar mi problema, alguien me podría poner un ejemplo adaptando la info de se hilo a mi código css?
Muchas gracias

samplei · #7 (**permalink**) 04/05/2011, 09:58

cambia "#navigationmenu ul ul a:hover" por "#navigationmenu ul li:hover ul"

cambia "#navigationmenu ul ul" por "#navigationmenu ul li ul"

En "#navigationmenu ul li ul" tienes "visibility:hidden", por eso necesitas "visibility: visible" en "#navigationmenu ul li:hover ul"

bananabalance · #8 (**permalink**) 10/09/2011, 06:20

Cita:

Iniciado por Jor1980

He mirado el hilo pero no he logrado solucionar mi problema, alguien me podría poner un ejemplo adaptando la info de se hilo a mi código css?
Muchas gracias

Solucionaste el problema Jor1980? tengo un problema similar.