Menu css y Border button

[DoPeY-BBS]

Código CSS:

/* CSS Document */
ul.Menus a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
}
ul.Menus,
ul.Menus ul {
  background: rgb(0, 128, 255);
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid  rgb(0, 128, 255);
  width: 185px;
 }
ul.Menus ul {
  position: absolute;
  top: 0;
  left: 185px;
  visibility: hidden;
}
ul.Menus li {
  position: relative;
  padding: 2px;
}
ul.Menus li:hover {
  background: rgb(136, 196, 255);
}
ul.Menus li:hover > ul {
  visibility: visible;
}
 

Mneu

Código HTML:

<ul class="Menus">
  <li class="Menus"><a href='http://p2p.wrox.com'>Historia del Arca</a>
    <ul>
      <li>Internacional</li>
      <li>Dominicana</li>
    </ul>
  <li class="Menus">Consejo de administraci&oacute;n
  <li>Personas Acogidas  
    <ul>
      <li class="Menus">Acogidos Internos
        <ul>
          <li>Audry</li>
          <li>Toto</li>
          <li>Jes&uacute;s</li>
        </ul>
      </li>
      <li class="Menus">Acogidos Externos
        <ul>
          <li>Julio</li>
          <li>Alex</li>
        </ul>
      </li>
      <li class="Menus">Asistentes
      </li>
  </ul>
  <li class="Menus">Actividades  
  <ul>
    <li>Talleres</li>
     <li>Productos</li>
      </ul>
      
</ul>
</div></div>
 

El problema es que no se mucho css (yo siempre tengo problemas y lo saben ejeje) aunque debo decir que he avanzado en el aprendisaje.. Bueno el problema es que no se porque no me coje la division cuando le doy un border-button.

por ahi unos menues pero siempre un trabajo raro que hacer

[Phantomluffy]

Yo no entiendo bien tu problema, si puedes explicarlo mejor igual podrá ayudarte. Dime que es lo que quieres.

[Phantomluffy]

He probado una cosa, que no sé si es lo que necesitas. Y es:

Esto es lo que tienes:

Código CSS:

ul.Menus ul {
  background: rgb(0, 128, 255);
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid  rgb(0, 128, 255);
  width: 185px;
 }
 

En vez de poner en el ul el border-bottom, ponlo en el li,tambien le puse border-left(pero eso a tu gusto) y cambiale el color(con el mismo no se nota el borde).

Código CSS:

ul.Menus li {
  position: relative;
  padding: 2px;
  cursor:pointer;
  border-bottom: 1px solid  white;
  border-left: 1px solid white;
}
 

PD: Le he puesto cursor:pointer para que se vea mejor el menu(para mi gusto que todos tengan manita me gusta mas) pero si quieres puedes ponerlo como tu quieras jeje. Espero que te sea de ayuda.

[DoPeY-BBS]

Perfecto, Muchas gracias



Ahora, tengo un inconveniente y es que no me gusta mucho como queda pero tengo que hacerlo con ese color azul de fondo pero la verdad como que queda mal ¿que opinas al respecto?.

[DoPeY-BBS]

Bien, como podrás darte cuenta e cambiado los css por completos y ahora mi problema se trata de que en que el display block no funciona correctamente en el segundo enlace,

Código CSS:

/* CSS Document */
ul.Menus a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  height:100%;
  
}
ul.Menus,
ul.Menus ul {
  background:#006699;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 185px;
   display: block;
  
 }
ul.Menus ul {
  position: absolute;
  top: 0;
  left: 185px;
  visibility: hidden;
 
}
ul.Menus li {
 
        position: relative;
        padding: 2px;
        cursor:pointer;
        border-bottom: 1px solid  white;
         display: block;
      }
ul.Menus li:hover {
  background: #383;
}
ul.Menus li:hover > ul {
  visibility: visible;
}
 

[webosiris]

copié el html de tu primer mensaje (salvo la última línea con los 2 </div>) y el css de tu último mensaje, y lo veo bien.

de hecho en tu imagen aparece 2 veces la frase "Historia del Arca" pero en tu html del primer mensaje, solo 1 vez.. ¿?

[DoPeY-BBS]

el problema es que es una web anidada a tres columnas y si quito un div se va todo a un lado y si te fjijas en el dibujito.. en el segundo enlace que estai igual, estaba probando ya que en el primero aparece bien el hover

[webosiris]

lo que vi ahora es que te estás olvidando cerrar los li! Quizás sea por eso.
Por ejemplo, el LI que abres en la línea 2 nunca lo cierras.

[DoPeY-BBS]

bueno.. aquí te dejare el código entero de la anidación con la parte central de la pagina ya que la web es de tres columnas

Código HTML:

<div id="content-container1">
        <div id="content-container2">
            <div id="section-navigation">
              <div id="menu">
<ul class="Menus">
  <li class="Menus"><a href='http://p2p.wrox.com'>Historia del Arca</a>
  <ul>
    <li>Internacional</li>
     <li>Dominicana</li>
      </ul>
    </li>
  <li class="Menus"><a href='http://p2p.wrox.com'>Consejo Adm.</a></li>
  <li class="Menus"><a href="http://p2p.wrox.com">Personas Acogidas</a>
    <ul>
        <li class="Menus"><a href="http://p2p.wrox.com">cogidos Internos</a>
          <ul>
              <li>Audry</li>
            <li>Toto</li>
            <li>Jes&uacute;s</li>
          </ul>
        </li>
        
      <li class="Menus">Acogidos Externos</li>
        <ul>
              <li>Julio</li>
          <li>Alex</li>
          
        </ul>
     
      <li class="Menus">Asistentes</li>
    </ul>
    <li class="Menus">Actividades </li>
    <ul>
    <li>Talleres</li>
     <li>Productos</li>
      </ul>
</ul>
</div></div>    
        <div id="content">
                <h2>NUESTRA  HISTORIA</h2>
                
                  <p>La  primera Comunidad del Arca fue fundada en 1964, en la ciudad de Trosly,  Francia, cuando Jean Vanier,                            lugarteniente de la Real Marina Canadiense se  encontr&oacute; con dos j&oacute;venes con discapacidad                       intelectual abandonados en un  hospital psiqui&aacute;trico de Francia, por lo que decidi&oacute; dejar su                       brillante carrera  por venir, y fund&oacute; un hogar para vivir con ellos como una verdadera familia.</p>
                  
                   <p> Este es  el nacimiento de El Arca, una organizaci&oacute;n de ayuda a los discapacitados  intelectuales, en                   donde, formando verdaderos Hogares, conviven tanto personas  Acogidas, como Asistentes.</p>
                 
                  <p>Hoy d&iacute;a  El Arca tiene 153 Comunidades en 53 pa&iacute;ses, entre los que se encuentra  Rep&uacute;                   blica Dominicana desde el a&ntilde;o 1984, con una trayectoria de amor y de  entrega a los m&aacute;s fr&aacute;                   giles y desprotegidos de nuestra sociedad.</p>
                 
                 <p>Nuestra  Comunidad en Santo Domingo es miembro permanente de la Federaci&oacute;n Internacional  de                   Comunidades Arca, con sede en Trosly, Francia.</p>
                 
                 <p> En la  actualidad, en el Barrio de Buenos Aires de Herrera, Santo Domingo Oeste, 10  personas con                      discapacidad intelectual comparten dos casas, con un n&uacute;mero  similar de Asistentes, conformando                      Hogares en donde la vida diaria se  desarrolla alrededor de las necesidades de las personas Acogidas, en un                     ambiente de amor, respeto, solidaridad, trabajo y ayuda. Asi mismo,12 personas  con discapacidad, que viven                    con sus familias del sector, asisten al Taller  productivo de la Comunidad.</p>
                    
                    <p>El  objetivo primordial de El Arca es qyudar a hacer de &eacute;stos ni&ntilde;os, j&oacute;venes y                    adultos, personas que puedan insertarse en la Sociedad actual, mediante el  reconocimiento de sus dones, como                    personas con la inmensa capacidad de amar y  ser amados, de aportar su trabajo productivo a la sociedad y de                   alguna forma  ayudar a sustentar los hogares en donde viven, a trav&eacute;s de talleres de  producci&oacute;n                   de Artesan&iacute;as, tarjetas de saludo, </div>
        
            <div id="aside">
                <h3>Aside heading
                </h3>
                <p>
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu                             feugiat nulla facilisis at vero eros et accumsan.
                </p>
            </div>
 

Este el css del menu

Código CSS:

/* CSS Document */
ul.Menus a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  height:100%;
  
}
ul.Menus,
ul.Menus ul {
  background:#006699;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 185px;
   display: block;
  
 }
ul.Menus ul {
  position: absolute;
  top: 0;
  left: 185px;
  visibility: hidden;
 
}
ul.Menus li {
 
        position: relative;
        padding: 2px;
        cursor:pointer;
        border-bottom: 1px solid  white;
         display: block;
      }
ul.Menus li:hover {
  background: #383;
}
ul.Menus li:hover > ul {
  visibility: visible;
}
 

y por si acaso el css de la pagina (el cuadro)

Código CSS:

/* CSS Document */
 
#container
{
    margin: 0 auto;
    width: 100%;
    background: #fff;
}
 
#header
{
    background: #ccc;
    padding: 20px;
}
 
#header h1 { margin: 0; }
 
#navigation
{
    float: left;
    width: 100%;
    background: #006699;
}
 
#navigation ul
{
    margin: 0;
    padding: 0;
}
 
#navigation ul li
{
    list-style-type: none;
    display: inline;
}
 
#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
 
#navigation li a:hover { background: #383; }
 
#content-container1
{
    float: left;
    width: 100%;
    background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0;
}
 
#content-container2
{
    float: left;
    width: 100%;
    background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0;
}
 
#section-navigation
{
    float: left;
    width: 16%;
    padding: 20px 0;
    margin: 0 2%;
    display: inline;
}
 
#section-navigation ul
{
    margin: 0;
    padding: 0;
}
 
#section-navigation ul li
{
    margin: 0 0 1em;
    padding: 0;
    list-style-type: none;
}
 
#content
{
    float: left;
    width: 56%;
    padding: 20px 0;
    margin: 0 0 0 2%;
}
 
#content h2 { margin: 0; }
 
#aside
{
    float: right;
    width: 16%;
    padding: 20px 0;
    margin: 0 2% 0 0;
    display: inline;
}
 
#aside h3 { margin: 0; }
 
#footer
{
    clear: left;
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}
 

A mi me sale igual ( tiene un ancho) el hover

[DoPeY-BBS]

Que opinan?

¿que estoy haciendo mal?

[jomaruro]

Hola:

No se si es lo que buscas pero, como te había indicado antes Webosiris tienes varios <li> y <ul> sin cerrar. Prueba a ver si así te sirve.

Código CSS:

<div id="menu">
                        <ul class="Menus">
                            <li class="Menus"><a href='http://p2p.wrox.com'>Historia del Arca</a>
                                <ul>
                                    <li>Internacional</li>
                                    <li>Dominicana</li>
                                </ul>
                            </li>
                            <li class="Menus"><a href='http://p2p.wrox.com'>Consejo Adm.</a></li>
                            <li class="Menus"><a href="http://p2p.wrox.com">Personas Acogidas</a>
                                <ul>
                                    <li class="Menus"><a href="http://p2p.wrox.com">Acogidos Internos</a>
                                        <ul>
                                            <li>Audry</li>
                                            <li>Toto</li>
                                            <li>Jes&uacute;s</li>
                                        </ul>
                                    </li>
                                    <li class="Menus">Acogidos Externos
                                        <ul>
                                            <li>Julio</li>
                                            <li>Alex</li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="Menus">Asistentes</li>
                            <li class="Menus">Actividades
                                <ul>
                                    <li>Talleres</li>
                                    <li>Productos</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
 

Y añado un consejo propio, cuando escribas tu código utiliza algún tipo de indentación. Suele ser muy útil, en el caso de las anidaciónes, para saber que etiqueta debemos abrir/cerrar.

Saludos.