Ayuda con diseño de menú CSS

hamedm · 2013-08-26T17:36:11-0500

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

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>

Codigo CSS

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] ;
			}

y aqui les pongo la foto

Andres128 · 2013-08-26T17:59:34-0500

Podría ser con un:

width:100%;

En el nav o la etiqueta que controle el fondo negro de esta forma se alargaría sola, sin tener que agregarle ningún dato, no estoy muy seguro pero podría funcionar :encouragement:

hamedm · 2013-08-26T18:06:55-0500

Pero, cuando se lo agrego a la etiqueta .nav>li { no funciona, porque lo que hace es desactivar el float

Andres128 · 2013-08-26T18:13:35-0500

hamedm dijo:
Pero, cuando se lo agrego a la etiqueta .nav>li { no funciona, porque lo que hace es desactivar el float

Si deseas envíame el url de tu web por privado y la reviso :encouragement:

hamedm · 2013-08-27T07:57:17-0500

Mp, enviado, pero aun no he encontrado el error, la pagina seria ardhamedon.com, ya se me activo

hamedm · 1 Sep 2013

Ya se Areglo, Muchas Gracias Por su Ayuda, Solicito, cierrre de tema, Gracias

Ayuda con diseño de menú CSS

hamedm

Andres128

hamedm

Andres128

hamedm

hamedm

Temas similares