- Desde
- 7 Ene 2013
- Mensajes
- 193
Hola, Como estan?
Estuve poniendo el siguiente menu, en mi sitio, solo que ahora, no se como hacer para que el menu, sin ponerle ningun dato, se alargo hacia la derecha.
Codigo Html
Codigo CSS
y aqui les pongo la foto
Estuve poniendo el siguiente menu, en mi sitio, solo que ahora, no se como hacer para que el menu, sin ponerle ningun dato, se alargo hacia la derecha.
Codigo Html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="index.css" type="text/css" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina Oficial-Sabz Goltab Melamine Industries</title>
</head>
<body>
<table >
<tr>
<td width="195">
</td>
<td width="121">
</td>
<td width="121">
</td>
<td width="121">
Iniciar Sesion
</td>
</table>
<div id="logo1">
<img src="Sitio sin nombre 1/top.gif" />
</div>
<ul class="nav">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Quienes Somos?</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">UX Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Identity</a></li>
<li class="dropdown">
<a href="#">Game Development</a>
<ul>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li class="dropdown">
<a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a></li>
<li class="dropdown">
<a href="#">Level 3</a>
<ul>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
</ul>
</li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Ficha Tecnica</a></li>
<li><a href="#">Melamina</a></li>
<li><a href="#">Artesanias</a></li>
<li><a href="#">Articulos de Cocina</a></li>
<li><a href="#">Contactenos</a></li>
</ul>
<ul>
</ul>
</body>
</html>
HTML:
@charset "utf-8";
/* CSS Document */
body{
background-image: url(index/Nueva%20carpeta/fondo8.jpg);
}
table{
width: 100%;
height: 20%;
color: [B]Enlace eliminado[/B] ;
background-color:#FF0;
text-align: right;
border: hidden;
}
[B]Enlace eliminado[/B] {
width: 100%;
height: 100%;
}
[B]Enlace eliminado[/B] img{
width: 1350px;
height: 100px;
}
.nav {
position: relative;
margin: 0;
padding: 0;
line-height: 22px;
}
/* The main navigation link containers */
.nav>li {
background: black; /* For older browsers */
background: rgba(0, 0, 0, .6);
display: block;
float: left; /* Displaying them on the same line */
margin: 0;
padding: 0;
}
/* The main navigation links */
.nav>li>a {
/* Layout */
display: block;
position: relative;
padding: 10px 20px;
/* Text */
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
color: [B]Enlace eliminado[/B] ;
font-size: 22px;
text-decoration: none;
/* Background */
background: black; /* For older browsers */
background: rgba(0, 0, 0, .6); /* Transparent background for modern browsers */
background-repeat: repeat;
/* Making the color to change on hover with a transition */
-webkit-transition: color .3s ease-in;
-moz-transition: color .3s ease-in;
-o-transition: color .3s ease-in;
-ms-transition: color .3s ease-in;
}
/* Changing the color on hover */
.nav>li>a:hover, .nav>li:hover>a {
color: [B]Enlace eliminado[/B] ;
}
/* The links which contain dropdowns menu are wider, because they have a little arrow */
.nav>.dropdown>a {
padding: 10px 30px 10px 20px;
}
/* The arrow indicating the dropdown */
.dropdown>a::after {
content: "";
position: absolute;
top: 17px;
right: 10px;
width: 7px;
height: 7px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
border-bottom: 1px solid [B]Enlace eliminado[/B] ;
border-right: 1px solid [B]Enlace eliminado[/B] ;
}
/* Changing the color of the arrow on hover */
.dropdown>a:hover::after, .dropdown:hover>a::after {
border-color: [B]Enlace eliminado[/B] ;
}
/* The submenus */
.nav ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: block;
}
/* General layout settings for the link containers of the submenus */
.nav ul li {
position: absolute;
top: -9999px; /* Hiding them */
height: 0px;
display: block;
margin: 0;
padding: 0;
/* Making them to expand their height with a transition, for a slide effect */
-webkit-transition: height .2s ease-in;
-moz-transition: height .2s ease-in;
-o-transition: height .2s ease-in;
-ms-transition: height .2s ease-in;
}
/* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */
.dropdown:hover>ul>li {
height: 30px;
position: relative;
top: auto;
}
/* The submenu links */
.nav ul li a {
/* Layout */
padding: 4px 20px;
width: 120px;
display: block;
position: relative;
/* Text */
font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
color: [B]Enlace eliminado[/B] ;
text-decoration: none;
font-size: 16px;
/* Background & effects */
background: black;
background: rgba(0, 0, 0, .6);
-webkit-transition: color .3s ease-in, background .3s ease-in;
-moz-transition: color .3s ease-in, background .3s ease-in;
-o-transition: color .3s ease-in, background .3s ease-in;
-ms-transition: color .3s ease-in, background .3s ease-in;
}
/* Changing the link's color and background on hover */
.nav ul li:hover>a, .nav ul li a:hover {
color: [B]Enlace eliminado[/B] ;
background: rgba(0, 0, 0, .75);
}
/* Making the level 2 (or higher) submenus to appear at the right of their parent */
.nav ul .dropdown:hover ul {
left: 160px;
top: 0px;
}
/* The submenu links have a different arrow which indicates another dropdown submenu */
.nav ul .dropdown a::after{
width: 6px;
height: 6px;
border-bottom: 0;
border-right: 1px solid [B]Enlace eliminado[/B] ;
border-top: 1px solid [B]Enlace eliminado[/B] ;
top: 12px;
}
/* Changing the color of the arrow on hover */
.nav ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after {
border-right: 1px solid [B]Enlace eliminado[/B] ;
border-top: 1px solid [B]Enlace eliminado[/B] ;
}
