menu css puro no funciona en Safari los links (submenus: por ejemplo la opción 1.1, linkado a forosdelweb.com) de este menú funcionan en Firefox, IE, pero no en Safari. ¿alguna sugerencia?
gracias
el html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>desplegable</title>
<link rel="stylesheet" href="css/menu-7.css" type="text/css" />
<style type="text/css">
#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {display: block;
position: relative;width: 160px;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: #6CC;border-bottom: solid 1px #6CC;color: #000;border-left: solid 8px #359BB8;border-right: solid 8px #359BB8;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>
<ul>
<li class="primera"><a href=""http.forosdelweb.com">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="http.forosdelweb.com">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>
</li>
</ul>
</div>
</body>
</html>
EL CSS
menu-7.css
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 220px;
margin: 20px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 {
width: 162px;
}
#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: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
a:active {position: relative;
}
#menu ul li a:active {background-color: #6CC;
color: #000;
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: 162px;background-color: #6CC;
}
#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: 160px;
padding: 6px 0px 8px 0px;
border: none;
border-top: solid 1px #fff;
background-color: #3AB7CB;
font-weight: normal;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
color: #000;
background-color: #359BB8;
}
#menu ul li ul li.primera {border-top: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
