Menu desplegable css
Publicado por miguel angel (2 intervenciones) el 28/05/2006 18:26:34
Hola, estoy realizando un menu css pero me estoy encontrando muchos problemas con compatibilidad en firefox y explorer. En firefox funciona correctamente pero en explorer se desplazan elementos. si alguien me puede ayudar.
<style type="text/css">
#tabs1 {
float:left;
width:100%;
background:#F4F7FB;
font-size:80%;
line-height:normal;
border-bottom:1px solid #BCD2E6;
}
#tabs1 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs1 li {
display:inline;
margin:0;
padding:0;
}
#tabs1 a {
float:left;
background:url("tableft1.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs1 a span {
float:left;
display:block;
background:url("tabright1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#627EB7;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs1 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#627EB7;
}
#tabs1 a:hover {
background-position:0% -42px;
}
#tabs1 a:hover span {
background-position:100% -42px;
}
#tabs1 #current a {
background-position:0% -42px;
}
#tabs1 #current a span {
background-position:100% -42px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: arial;
color: green;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 10em;
text-align: left;
cursor: default;
background-color: white;
border-width: 1px 0;
}
#principal li {
width: 15em;
}
li ul {
display: none;
top: 75%;
left: 0;
font-weight: normal;
padding: 0.5em 0 1em 0;
}
li>ul {
position: absolute;
}
li li {
display: block;
float: none;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
a:hover {
active {color: #080;}
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div >
<ul id="nav">
<li id="principal" style="width: 5em;"> <!--ajusta el ancho de la celda de la presentacion-->
<div id="tabs1" ><a href=""><span>Administració</span></a></div>
<ul>
<li><a href="">Classification</a></li>
<li><a href="">Physcial Characteristics</a></li>
<li><a href="">Habitat</a></li>
<li><a href="">Lifestyle</a></li>
<li><a href="">Evolution</a></li>
<li><a href="">Distribution</a></li>
</ul>
</li>
<li id="principal">
<div id="tabs1"><a href=""><span>Species</a></span></div>
<ul>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Remora remora</a></li>
<li><a href="">Sharksucker</a></li>
<li><a href="">Slender remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Whitefin sharksucker</a></li>
</ul>
</li>
<li id="principal">
<div id="tabs1"><a href=""><span>Links</a></span></div>
<ul>
<li><a href="http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&search_value=168567">Remoras at ITIS</a></li>
<li><a href="http://animaldiversity.ummz.umich.edu/accounts/remora/r._remora.html">Remora remora at ADW</a></li>
<li><a href="http://www.oceanlight.com/html/remora_sp.html">Phillip Colla photographs</a></li>
<li><a href="http://www.amonline.net.au/fishes/fishfacts/fish/enaucrates.htm">Slender suckerfish at Australian Museum Online</a></li>
<li><a href="http://www.colzoo.org/animalareas/shores/remora.html">Remora at Columbus Zoo</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<style type="text/css">
#tabs1 {
float:left;
width:100%;
background:#F4F7FB;
font-size:80%;
line-height:normal;
border-bottom:1px solid #BCD2E6;
}
#tabs1 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs1 li {
display:inline;
margin:0;
padding:0;
}
#tabs1 a {
float:left;
background:url("tableft1.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs1 a span {
float:left;
display:block;
background:url("tabright1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#627EB7;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs1 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#627EB7;
}
#tabs1 a:hover {
background-position:0% -42px;
}
#tabs1 a:hover span {
background-position:100% -42px;
}
#tabs1 #current a {
background-position:0% -42px;
}
#tabs1 #current a span {
background-position:100% -42px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: arial;
color: green;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 10em;
text-align: left;
cursor: default;
background-color: white;
border-width: 1px 0;
}
#principal li {
width: 15em;
}
li ul {
display: none;
top: 75%;
left: 0;
font-weight: normal;
padding: 0.5em 0 1em 0;
}
li>ul {
position: absolute;
}
li li {
display: block;
float: none;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
a:hover {
active {color: #080;}
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div >
<ul id="nav">
<li id="principal" style="width: 5em;"> <!--ajusta el ancho de la celda de la presentacion-->
<div id="tabs1" ><a href=""><span>Administració</span></a></div>
<ul>
<li><a href="">Classification</a></li>
<li><a href="">Physcial Characteristics</a></li>
<li><a href="">Habitat</a></li>
<li><a href="">Lifestyle</a></li>
<li><a href="">Evolution</a></li>
<li><a href="">Distribution</a></li>
</ul>
</li>
<li id="principal">
<div id="tabs1"><a href=""><span>Species</a></span></div>
<ul>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Remora remora</a></li>
<li><a href="">Sharksucker</a></li>
<li><a href="">Slender remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Whitefin sharksucker</a></li>
</ul>
</li>
<li id="principal">
<div id="tabs1"><a href=""><span>Links</a></span></div>
<ul>
<li><a href="http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&search_value=168567">Remoras at ITIS</a></li>
<li><a href="http://animaldiversity.ummz.umich.edu/accounts/remora/r._remora.html">Remora remora at ADW</a></li>
<li><a href="http://www.oceanlight.com/html/remora_sp.html">Phillip Colla photographs</a></li>
<li><a href="http://www.amonline.net.au/fishes/fishfacts/fish/enaucrates.htm">Slender suckerfish at Australian Museum Online</a></li>
<li><a href="http://www.colzoo.org/animalareas/shores/remora.html">Remora at Columbus Zoo</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Valora esta pregunta
0