Como hacer un menu drop down con HTML y CSS3
Este es un tutorial de como crear una menu en HTML Y CSS3 , aquellos tipicos menus que tiene una pagina web, hago profundizacion de el truco que permite crear el menu,
esta parte del estilo css3 permite crear ese menu.
.nav li:hover ul
{
visibility:visible;
}
.nav li:hover
{
background-color:maroon;
}
El codigo es pequeño lo hice asi para que les quede mas facil comprenderlo si miran videos en youtube se enredaran facil, quien llegue a este post estara privilegiado porque la tendran mas facil.
1. crearan un archivo con extension .php llamado menu.php y luego pegaran el codigo html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="../css/menu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">fotos</a>
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2. Crearan una carpeta llamada css y luego dentro de la carpeta crearan un archivo con extension .css y lo llamaran menu.css y luego pegaran el estilo css.
.nav ul
{
list-style-type:none;
margin:0px;
padding:0px;
}
.nav li
{
width:100px;
height:30px;
background-color:#FF6F01;
text-align:center;
border-right:1px slid white;
position:relative;
line-height:30px;
}
.nav li ul li
{
/*float:none;*/
width:150px;
text-align:left;
padding-left:5px;
border:1px solid white;
}
.nav a
{
text-decoration:none;
color:white;
}
.nav li ul
{
position:absolute;
top:30px;
left:0px;
visibility:hidden;
}
.nav li:hover ul
{
visibility:visible;
}
.nav li:hover
{
background-color:maroon;
}
Este es un tutorial de como crear una menu en HTML Y CSS3 , aquellos tipicos menus que tiene una pagina web, hago profundizacion de el truco que permite crear el menu,
esta parte del estilo css3 permite crear ese menu.
.nav li:hover ul
{
visibility:visible;
}
.nav li:hover
{
background-color:maroon;
}
El codigo es pequeño lo hice asi para que les quede mas facil comprenderlo si miran videos en youtube se enredaran facil, quien llegue a este post estara privilegiado porque la tendran mas facil.
1. crearan un archivo con extension .php llamado menu.php y luego pegaran el codigo html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="../css/menu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">fotos</a>
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2. Crearan una carpeta llamada css y luego dentro de la carpeta crearan un archivo con extension .css y lo llamaran menu.css y luego pegaran el estilo css.
.nav ul
{
list-style-type:none;
margin:0px;
padding:0px;
}
.nav li
{
width:100px;
height:30px;
background-color:#FF6F01;
text-align:center;
border-right:1px slid white;
position:relative;
line-height:30px;
}
.nav li ul li
{
/*float:none;*/
width:150px;
text-align:left;
padding-left:5px;
border:1px solid white;
}
.nav a
{
text-decoration:none;
color:white;
}
.nav li ul
{
position:absolute;
top:30px;
left:0px;
visibility:hidden;
}
.nav li:hover ul
{
visibility:visible;
}
.nav li:hover
{
background-color:maroon;
}