Foros del Web » Creando para Internet » CSS »

redondear cuadros

Estas en el tema de redondear cuadros en el foro de CSS en Foros del Web. como lo dice el titulo quiero redondear lo de esta pagina http://mipaginagratis.mx/ejercicios/javier/menudesplegable.php [URL="http://mipaginagratis.mx/ejercicios/javier/menudesplegable.php"]http://mipaginagratis.mx/ejercicios/javier/menudesplegable.php[/URL] este es mi codigo html: <div id="menu"> <ul> <li class="nivel1 primera" tabindex="1"><span ...
  #1 (permalink)  
Antiguo 26/03/2012, 19:25
 
Fecha de Ingreso: marzo-2012
Mensajes: 4
Antigüedad: 12 años, 1 mes
Puntos: 1
redondear cuadros

como lo dice el titulo quiero redondear lo de esta pagina

http://mipaginagratis.mx/ejercicios/javier/menudesplegable.php

[URL="http://mipaginagratis.mx/ejercicios/javier/menudesplegable.php"]http://mipaginagratis.mx/ejercicios/javier/menudesplegable.php[/URL]

este es mi codigo html:

<div id="menu">
<ul>
<li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="2"><span class="nivel1">Opción 2</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">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 IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="3"><span class="nivel1">Opción 3</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">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 IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="4"><span class="nivel1">Opción 4</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><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 IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="5"><span class="nivel1">Opción 5</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><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 IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

y este es el codigo css:

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: left;
font-size: 0.7em;

margin: 20px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 {
webkit-border radius:5px;
margin-bottom:5px;
width: 190px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a, #menu ul li span {display: block;
text-decoration: none;
color: #fff;
background-color: #acaaa5;
border-top: none;
padding: 8px;
position: relative;
}
a:active {position: relative;
}
#menu ul li a:active {background-color: #6CC;
color: #fff;
border-bottom: solid 1px #6CC;
position: relative;
}
#menu ul li span.nivel1 {display: block;
}
#menu ul li:hover span.nivel1 {cursor: pointer;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li a:active ul {display: block;
position: relative;width: 190px;background-color: #000;
}
#menu ul li a:link:hover ul {display: none;
}
#menu ul li a:active:hover ul {display: block;
}
#menu ul li ul li a {width: 190px;
padding: 6px 0px 8px 0px;
border: none;
border-top: solid 1px #fff;
background-color: #ebebeb;
font-weight: normal;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
color: #fff;
background-color: #f00;
}
#menu ul li ul li.primera {border-top: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}


#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {display: block;
position: relative;width: 190px;border: solid 1px #fff;border-top: none;background-color: #6CC;}
#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {background-color: #000;border-bottom: solid 1px #6CC;color: #fff;border-left: solid 8px #000;border-right: solid 8px #000;
}
  #2 (permalink)  
Antiguo 26/03/2012, 20:36
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: redondear cuadros

Hola
No entiendo, yo lo veo con bordes o mejor dicho con vertices redondeados.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: cuadros, esquinas, redondeados
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:03.