Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/12/2013, 06:32
neofilo
 
Fecha de Ingreso: abril-2012
Ubicación: Madrid (España)
Mensajes: 162
Antigüedad: 12 años
Puntos: 5
Cambiar menu de 2 columnas en 1 columna

Hola a todos, tengo un menu echo con css (el codigo no es mio, es de una plantilla gratuita) el problema que tengo es que en el menu, hay desplegables, osea, cuando te situas encima se despliegan las opciones de ese menu. El problema, es que cuando las opciones superan las 4 me comienza a salir en columnas y no se como eliminar eso y que me salga todo en una sola columna.


Pongo el codigo del CSS a ver si me podeis echar una mano. (Ojo, es un poco largo)


Código:
@font-face { 
  font-family: Yanone Kaffeesatz; 
    src: url('../fonts/CALIBRI.eot'); 
    src: local("CALIBRI"), url('../fonts/CALIBRI.ttf'); 
} 

@font-face { 
  font-family: CALIBRI; 
    src: url('../fonts/CALIBRI.eot'); 
    src: local("CALIBRI"), url('../fonts/CALIBRI.ttf'); 
} 

html { 
  height: 100%;
}

* { 
  margin: 0;
  padding: 0;
}

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

body { 
  font: normal .80em arial, sans-serif;
  background: #eeeeee url(../images/pattern.png);
  color: #444;
}

p { 
  padding: 0 0 20px 0;
  line-height: 1.7em;
  text-align : justify;
  
}

img { 
  border: 0;
}


blockquote { 
  margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;
}
ul { 
  margin: 2px 0 22px 17px;
}
ul li { 
  list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}
ol { 
  margin: 8px 0 22px 20px;
}
ol li { 
  margin: 0 0 11px 0;
}
.left { 
  float: left;
  width: auto;
  margin-right: 10px;
}
.right { 
  float: right; 
  width: auto;
  margin-left: 10px;
}
.center { 
  display: block;
  text-align: left;
  margin: 20px auto;
}

#main, nav, #container, #logo, #site_content, footer { 
  margin-left: auto; 
  margin-right: auto;
}

nav { 
  height: 44px;
  width: 940px; /*ANCHO DE LA CAJA DEL MENU*/
  float: right;
  margin: -20px auto 0 auto;
  color: #222;
  background: #ddd; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#fff, #ddd);
  background: -o-linear-gradient(#fff, #ddd);
  background: -webkit-linear-gradient(#fff, #ddd);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  border: 1px solid #eee;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
} 

#sidebar_container { 
  float: right;
  /*width: 224px;*/
  margin: 25px 0 0 0;
}
.sidebar { 
  float: right;
  width: 200px;
  padding: 0px 20px;
  margin: 0 0 10px 0;
}
#sidebar_container2 { 
  float: left;
  width: 100px;
  margin: 25px 25px 50px 0;
}
.sidebar2 { 
  float: left;
  width: 100px;
  padding: 0px -20px;
  margin: 0 50px 0 0;
} 
.sidebar h3, .content h1 { 
  padding: 0 15px 20px 0;
  font: 230% 'CALIBRI', arial, sans-serif;
  text-shadow:  #FFF 1px 1px;
  margin: 0 1px;
  color: #444;
}
.sidebar h3 { 
  color: #444;
  font: 250% 'CALIBRI', arial, sans-serif;
  padding: 0 15px 5px 0;
}
.sidebar ul { 
  margin: 0 0 15px 0;
} 
.sidebar li a, .sidebar li a:hover { 
  color: #555;
  text-decoration: none;
} 
.sidebar li a:hover { 
  text-decoration: underline;
} 
.sidebar_item, .content_item { 
  padding: 15px 0;
}
.content { 
  text-align: left;
  width: 600px;
  margin: 0 0 0 0;
  float: left;
  font-size: 120%;
}
.content ul { 
  margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li { 
  list-style-type: none;
  background: url(../images/bullet.png) no-repeat;
  margin: 0 0 0 0; 
  padding: 0 0 4px 28px;
  line-height: 1.5em;
}
footer { 
  width: 950px;
  font: 170% 'CALIBRI', arial, sans-serif;
  height: 30px;
  padding: 5px 0 20px 0;
  text-align: left;
  background: #ddd; /* Show a solid color for older browsers */
  background: -moz-linear-gradient(#fff, #ddd);
  background: -o-linear-gradient(#fff, #ddd);
  background: -webkit-linear-gradient(#fff, #ddd);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
  border: 1px solid #eee;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
}
footer p { 
  line-height: 1.7em;
  padding: 0 0 10px 0;
}
footer a { 
  color: #222;
  text-decoration: none;
}
footer a:hover { 
  color: #222;
  text-shadow: none;
  text-decoration: underline;
}
.separator { 
  width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;
}
table { 
  margin: 0 0 0 0;
}

/* Image Transitions */
ul#images {
  margin: 10px 15px 10px 0;
  padding: 0;
  list-style: none;
  position: relative;
}
ul#images li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 150px;
}

/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 200px;
}
html body ul.sf-menu ul ul { 
  margin: 0 0 0 200px;
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
  z-index:2;
}
ul.sf-menu { 
  display: block;
  position: relative;
  z-index:2;
}
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
  z-index:2;
}
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}
ul.sf-menu a { 
  display: block;
  position: relative;
}
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 150px; 
  top: auto;
  left: -999999px;
}
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}
ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;
}
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  right: 5px;
  display: block;
  background: url(../images/arrows-black.png) no-repeat 0 0;
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}
ul ul span.sf-arrow { 
  right: 5px;
  top: 20px;
  background-position: 0 100%;
}
/* Theming the menu */
ul#nav { 
  float: left;
}
ul#nav ul { 
  background: #DDD;
  margin-top: 5px;
  padding-bottom: 15px;
}
ul#nav li a { 
  padding: 7px 20px 6px 20px;
  font: 160% 'CALIBRI', arial, sans-serif;
  text-shadow: 1px 1px #fff;
  text-decoration: none;
  color: #222;
  margin-right: 2px;
  text-align:left;
}
ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus { 
  color: #B30303;
  text-shadow: none;
}
ul#nav ul li a { 
  color: #222;
}
ul#nav ul li a:hover { 
  color: #B30303;
  margin-right: 2px;
}
/* Image Transitions */
ul#images {
  margin: 0 15px 10px 0;
  padding: 0;
  position: relative;
  z-index:0;
}
ul#images li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 300px;
  list-style: none;
  z-index:0;
}
ul#images2 {
  margin: 0 15px 10px 0;
  padding: 0;
  position: relative;
  z-index:0;
}
ul#images2 li {
  display: block;
  overflow: hidden;
  padding: 0;
  float: left;
  width: 155px;
  height: 100px;
  list-style: none;
  z-index:0;
}