alcance del area de un boton

pasteles · #1 (**permalink**) 15/07/2009, 16:10

Buenas estoy haciendo un menú con botones con css, y es la primera vez que lo hago y tengo un fallo que no se como solventar. La cuestión es que me está gustando como va quedando solo tengo un pequeño problema y que consisten en cuando desplazo el cursor dentro del botón hacia abajo, me salgo del botón pero sigue siendo clickeable. Me refiero a esto:

img139.imageshack.us/img139/8985/89368082.jpg

(Aunque el ratón aparece como si no estuviera apuntando a un link, en realidad si esta apuntando).

Esto solo me ocurre cuando me salgo del botón por la parte de abajo, y cuando accedo al botón por abajo tampoco me sale clickeable hasta que estoy dentro, el problema es cuando me salgo del botón.
Mi código html es:

Código HTML:

 <body>
		<div id="cuerpo">
			<div id="cabecera">
				<div id="banner">
					<img id="img_banner" src="/img/cabecera.png" alt="Tamaño original"> 
				</div>
				<div id="botonera">
					<ul id="menu">
						<li><a href="img" target="_self">Principal</a></li>
						<li><a href="img" target="_self">About me</a></li>
					</ul>
				</div>
			</div>
			<div id="principal">
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			Probando la caja principal<br/>
			</div>
			<div id="footer">
			</div>
		</div>
	</body>
</html>

Y mi código css es:

Código:

body{
	background-image: url(/img/fondo.jpg);
	background-repeat: repeat;
	background-attachment: scroll;
	background-color: maroon;
	margin:0 auto;
	color:white;
	width: 950px;
	text-align:justify;
}
#cuerpo{
	margin-top:15px;
	z-index:0;
	
}
#cabecera{

}

#img_banner{
	display:block;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;

}
#botonera{
	background-image: url(/img/botonera.png);
	width: 100%;
	height:40px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;

}

ul#menu
{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:40px;
	font-size:14px;
	font-weight:bold;
	/*background:transparent url(images/nav_bg.png) repeat-x top left;*/
	font-family:Arial, Helvetica, sans-serif;
	/*border-bottom:1px solid #000000;
	border-top:1px solid #000000;*/
	
}

ul#menu li
{
	display:block;
	height:40px;
	float:left;
	clear: none;
	border-right:1px solid #000;
	
}

ul#menu li a
{
	display:block;
	float:left;
	/*height:40px;*/
	color:#999999;
	text-decoration:none;
	font-weight:bold;
	padding:12px 10px 10px 10px;
}

ul#menu li a:hover
{	display:block;
	color:#FFFFFF;
	height:40px;
	
	/*background:transparent url(/img/nav_bg.png) 0px -30px no-repeat;*/
}
	

ul#menu li a.current
{
	display:block;
	
	/*background:transparent url(images/nav_bg.png) 0px -30px no-repeat;*/
	float:left;
	margin:0;
}

#b_principal{
	border-left: #000000;
	padding: auto auto;
	height: 100px;
}

#principal{
	width: 100%;
	border:1px solid #000;
	
	height: 500px;
	
	background-image:url(/img/trans.png);
}

/*#banner{
	margin: auto;
	width: 100%
}*/



/*
h1{
	text-align: center;
}*/
/*
.Sheet
{
  overflow: hidden;
  min-width:35px;
  min-height:35px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  width: 900px;
}
			#cuerpo{
				width: 930px;
				padding: 10px;
				margin: 0 auto;
			}
			#cabecera{
				text-align:right;
			}
			*/

Gracias de antemano.

kseso? · #2 (**permalink**) 15/07/2009, 16:15

Posíblemente sea por la altura de 40px que le tienes a "ul#menu li a:hover", en "ul#menu li a" la tienes comentada. Eso hará que el tamaño de a:hover (más su pádin) extienda la zona activa más abajo.

Un saludo

pasteles · #3 (**permalink**) 16/07/2009, 05:16

Gracias