/* General */
body{
background-color: #000000;
}
/* ------- */
/* 1.0 - Menu de navegación */
#menu{
list-style-type:none;
margin:0;
padding:0;
top:0;
position:fixed;
}
#menu li{
float: left;
width: 20%;
}
#menu li:first-child a{
background-color:gray;
}
#menu li a{
background-color: black;
color: white;
display: block;
padding: 16px 16px 16px 16px;
text-align:center;
font-family: monospace;
text-decoration:none;
border-bottom: 2px solid white;
}
#menu li a:hover{
background-color:gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Astro cosmos</title>
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li><a href="home.html">Inicio</a></li>
<li><a href="maths.html">Matemáticas</a></li>
<li><a href="physics.html">Física</a></li>
<li><a href="computacion.html">Computación</a></li>
<li><a href="others.html">Otros</a></li>
</ul>
</body>
</html>
Si se dan cuenta, la palabra computación solo queda en "computacio"
, ¿Cuál es el error? , estoy aprendiendo css3
hace poco y voy aprendiendo, pero coloqué el texto de los <a>
(que están dentro de los <li>
), con display:block
(para que se comporte como un bloque) y con el texto centrado, entonces ¿Por qué tampoco se ve?