[SOLUCIONADO] Menu desplegable

[acuriel91]

Hola! Estoy trasteando con el dreamweaver con los conocimientos básicos de HTML y CSS y comenzando mi primera web por esta plataforma.

El caso es que a la hora de meterme con los menús, me pasa que al crear el menú me sale un cacho (imagen) de menú extra que no hay manera de eliminar. Como para poder poner más pestañas de menú.

He estado probando pero no logro saber donde eliminarlo. Adjunto imagen y css.

IMAGEN:



CSS:

#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; }

#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}

#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }

#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }

#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }

#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }

#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}

#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-
radius:0 0 5px 5px; z-index:999; }

#cssmenu ul li > ul{width:150px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}

#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top,
#333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }

#cssmenu{
border-color:#000;
margin-right: auto;
margin-left: auto;
}

#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{background:#111;}

Gracias

[laura_moreno14]

Por lo que veo estas usando el modo diseño de dreamweaver, ya que tu css tiene bastante codigo innecesario.
Por ejemplo, padding:0; y margin:0; repetidas veces, outline, content:", ...
Te recomiendo que si te manejas con html y css escribas directamente tu codigo, no digo que dejes de usar dreamweaver, ojo, si no que no lo utilices en modo diseño.

De todas formas no se cual es el trozo de imagen que dices que sobra, no puedo ayudarte en eso.

[ArturoGallegos]

Si te refieres al excedente que hay al lado derecho de "contacto", este no es imagen de sobra, simplemente el menú esta ocupando el 100% del ancho de su padre, si deseas que deje de tener este comportamiento debes darle un tamaño fijo al menú o bien flotarlo.

[acuriel91]

Gracias. Solucionado.