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.