Ayuda Con Menu!!

Primeramente tendrías que arreglar el tema de las etiquetas y mirar que todas cuadren.
<div id="menu">
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Nosotros</a></li>
<li> <a href="#">Servicios</a></li>
<ul> <li><a href="#">Diseño Grafico</a></li>
<li><a href="#">Imprenta</a></li>
</ul>
<li> <a href="#">Tu Logo</a></li>
<li> <a href="#">Sublimación y Estampado</a></li>
<li> <a href="#">Ploteo en Vinilo</a></li>
<li> <a href="#">Clientes</a></li>
<li> <a href="#">Contacto</a></li>

</ul>
</div>



Y añadimos al css esto :

#menu1 ul li {
	list-style-type: none; /* al poner none le quitamos el hito que tenga la lista.. (el circulo o el numero ) */
	padding: 0px 5px; /* Separación entre los li ... de la forma que lo hemos puesto le dá 0px arriba y abajo... y 5px derecha e izquierda */
	float: left; /*cada li flota a la izquierda y salen todos en la misma linea */
}

Si no le das color de fondo a li te saldran solo las letras y verás la imagen de fondo en tu menú.

Saludos
sigue sin funcionarme, el menu esta formado por : home, nosotros, servicios, tu logo, sublimacion y estampado, ploteo en vinilo, contacto y clientes como links principales, y dentro de "servicios" tendria que tener dos submenus con "diseño grafico" e "imprenta" por lo que me pregunto si el codigo que hice esta bien o lo tengo mal desarrollado.
Vale.. vale... no te había entendido bien.. perdona.. :sad:

Te dejo el codigo que tengo yo hecho a ver si es lo que pides... le he quitado la decoracion de colores y bordes para que quede trasparente y se vea el fondo que le pongas .

Modifica y prueba para aprender a dominarlo. Algunas cosas son muy lógicas.. y lo que no entiendas pues pregunta sin problemas. Lo de [if lte IE 6] es para que se vea bien en Internet Explorer 6 en adelante...

Espero tus noticias, esperando que te ayude en tu proyecto.

Saludos


<div id="menu">
<ul>
  <li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 1.1</a></li>
		<li><a href="#">Opción 1.2</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 2.1</a></li>
		<li><a href="#">Opción 2.2</a></li>
		<li><a href="#">Opción 2.3</a></li>
		<li><a href="#">Opción 2.4</a></li>
		<li><a href="#">Opción 2.5</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 3.1</a></li>
		<li><a href="#">Opción 3.2</a></li>
		<li><a href="#">Opción 3.3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 4.1</a></li>
		<li><a href="#">Opción 4.2</a></li>
		<li><a href="#">Opción 4.3</a></li>
		<li><a href="#">Opción 4.4</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="#">Opción 5.1</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="#">Opción 5.3</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>


#menu {  text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { 
list-style-type: none; 
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menu ul li.nivel1 { 
float: left;
width: 162px;
margin-right: 2px;
}

#menu ul li a {
display: block;
text-decoration: none;
color: #000;
/*background-color: #399;*/
border: none;
padding: 8px;
position: relative;
}

#menu ul li:hover {
position: relative;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
/*background-color: #6CC;*/
color: #000;
position: relative;
}

#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}

#menu ul li ul {
display: none;
}

#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
left: 0px;
}

#menu ul li ul li a {
width: 160px;
padding: 6px 0px 8px 0px;
/*border-top-color: #000;*/
}

#menu ul li ul li a:hover {
/*border-top-color: #000;*/
position: relative;
}

table.falsa {
border-collapse:collapse;
border:none;
float: left;
position: relative;
}
Gracias Over por el dato! Estoy trabajando sobre eso! Pero mi problema es que no puedo editar la parte de menu ul o menu li porque el dreamweaver no me lo toma, osea viste que cuando pones en la hoja de estilo "#menu {" para editar ese nombre se pone en rosa; bueno hasta ahi me funciona bien, el tema es cuando quiero editar el menu ul o li, ahi no me lo reconoce y no me lo pone en rosa, como si no fuera valido. Recuerdo nuevamente que estoy trabajando con dreamweaver!

Espero puedan ayudarme!
Y otra consulta en head tengo que poner algo referido al menu y la hoja de estilo? yo estoy usando la misma hoja de estilo donde tengo editado lo que es el body. Puede ser ese el error?
Vamos por partes... (como dijo Jack El Destripador.. ;D)

En CSS cuando es:

  • Palabra de codigo definidas: Se pone el nombre tal como es....... ej.: body{background-color:#000000;}
  • Identificador ( id ="menu") ; Se escribe con # ... ej.: #menu
  • Identificador ( id ="menu") + "algo" ; Se añade despues del identificador ... ej.: #menu ul li {display:none;}
  • Una clase definida por ti : se escribe con un punto delante : ej.: .clasecuadros {color:#ffffff;}

Y otra consulta en head tengo que poner algo referido al menu y la hoja de estilo? yo estoy usando la misma hoja de estilo donde tengo editado lo que es el body. Puede ser ese el error?

Puedes utilizar el mismo sin problemas, se puede hacer otro para tenerlo separado , pero eso suele hacer cuando se tiene muchisimo codigo y quieres seccionar las cosas. Para facilitar la busqueda .

Saludos.
Ya logre arreglar el problema! Ahora lo que no consigo es hacer que mi menu quede como el de la imagen:

como puedo hacer para poner ese marco negro transparente en el fondo del menu y que los subindices me queden debajo de el indice "servicios"
Over, logre hacer el rectangulo y ponerle transparencia, el problema es que tambien la transparencia me lo hace en las letras del menu! como hago para que eso no pase?

Te paso el código css tal como me quedo hasta ahora!

body {background-image:url(Imagenes/fondo.png); background-repeat:repeat; height:1000px;
width:900px; aling:center;
}

#menu {
text-align: center;
width: 1900px;
height:70px;
background:#333; filter: alpha(opacity=40); opacity:0.4;
margin-left:0;
}

#menu ul {
font-size: 18pt;
list-style-type: none;
font-family:Amethyst, Tunga, Toledo;
}


lo que tampoco pude lograr es que las opciones del menu me queden acomodadas dentro del rectangulo que hice y que los submenus queden acomodados verticalmente debajo de servicios!

Podrán orientarme?
Viendo el enfoque que le estas dando al tema creo que debemos hacer una pausa y recapitular.

Primeramente deberías leer un poco mas del tutorial que tenemos en la web. html, css, divs ...

* Partimos de la base que tenemos que seccionar con divs todos los modulos de la web (cabecera, navegación(menus), contenido, pie de página... )
* Podemos darles a todos esos modulos (divs) una estructura de inicio (alto, ancho, color o imagen de fondo ....)
* Una vez tengamos definido todo eso podemos trabajar en añadirle contenido dentro de los divs.. y de esa manera conseguimos "colocar" en su posición todas las cosas.

Si no disponemos de esa estructura base .. cada vez que añadimos algo el resto se nos descoloca de sitio. Por ello te digo que leas un poco mas al respecto.

Así no confundirás las cosas... siendo lo mismo.

<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>

Esto realmente es css también .. y lo que estas haciendo es incluirlo en el html.... Realmente está bien hecho.. pero si tienes un archivo .css ¿¿¿ para que añadirlo en el archivo html..???. de esa manera ensuciarás el codigo, te quedará desordenado o incluso repetirás codigos y será una locura entender donde tenemos los errores.

Otro punto importantisimo a tener en cuenta en programación es la sintaxis de las cosas. Me explicaré ...

@charset "utf-8";
/* CSS Document */

body {background-image:url(Imagenes/fondo.png); background-repeat:repeat; height:1000px;
width:900px; aling:center;
}

#menu {
width: 83.7Em;
height:70px;
background:#333; filter: alpha(opacity=40); opacity:0.4;
}

#menu ul {
list-style-type: none;
}

#menu li a{ float: left; display: block; color: white; font-family:Amethyst, Tunga, Toledo;; font-size: 1.2Em; padding: 8px; margin: 0 3px; border-right:solid 3px #FFF; margin-top:12px;
}

Lo que ves en rojo son errores de sintaxis.. osea que no estan bien escritos.. y por consiguiente no funcionan y no hacen su cometido.

Para que veas más fácil el codigo css , mejor escribirlo en cascada...

#menu li a {
float: left;
display: block;
color: white;
...
...
}

Trabajas en localhost o remoto ??..