我正在创建一个垂直下拉菜单 当您单击其中一个菜单项时。下拉列表将从宽度:0px变为宽度:500px; 由于某种原因,它不适用于FireFox和IE。在我开始之前,我在Jsfiddle.net上创建它,它适用于每个浏览器。
在jsfiddle制作的第一个菜单:
适用于Chrome - FireFox - IE - Safari和Opera http://jsfiddle.net/DennisBetman/3AyHK/
官方菜单粘贴在jsfiddle:
适用于Chrome - Safari和Opera http://jsfiddle.net/DennisBetman/RLb6E/
CSS
body{
margin:0px;
background: url(../img/background.png);
}
*:focus {
outline: 0;
}
.menu-default{
width: 220px;
height: 100%;
position:fixed;
background-color: white;
top:0;
bottom:0;
left:0;
border-right:1px solid #d0d0d0;
}
.menu-default .top{
width:221px;
height: 152px;
background-color: #313131;
margin-bottom:1px;
!margin-bottom:4px; /* IE7 */
}
.menu-default ul{
list-style-type: none;
padding:0px;
margin: 0px;
!margin-left:0px; /* IE7 */
}
.menu-default ul li {
position: relative;
width:100%;
background-color:white;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
margin-top:-1px;
!margin-top:-4px; /* IE7 */
}
.menu-default ul li ul {
position:fixed;
z-index:1;
height:100%;
margin-left: 221px;
-webkit-transition: .5s width ease, .5s height ease-in 0.5s;
-o-transition: .5s width ease, .5s height ease-in 0.5s;
-ms-transition: .5s width ease, .5s height ease-in 0.5s;
-moz-transition: .5s width ease, .5s height ease-in 0.5s;
transition: .5s width ease, .5s height ease-in 0.5s;
background-color: #f4f4f4;
width:0px;
overflow:hidden;
list-style-type:none;
padding:0px;
top:0;
}
.menu-default ul li ul .content{
width:150px;
margin-left:-150px;
-webkit-transition: .5s margin-left ease;
-moz-transition: .5s margin-left ease;
-ms-transition: .5s margin-left ease;
-o-transition: .5s margin-left ease;
transition: .5s margin-left ease;
}
.menu-default ul li:focus ul .content{
margin-left:0px;
-webkit-transition: .5s margin-left ease 0.5s;
-moz-transition: .5s margin-left ease 0.5s;
-ms-transition: .5s margin-left ease 0.5s;
-o-transition: .5s margin-left ease 0.5s;
transition: .5s margin-left ease 0.5s;
}
.menu-default ul li:focus ul, .menu-default ul li ul:focus, .menu-default ul li ul:focus ~ ul{
margin-left:221px;
height:100%;
width:500px;
-webkit-transition: .5s width ease 0.5s, .0s height ease-in;
-moz-transition: .5s width ease 0.5s, .0s height ease-in;
-ms-transition: .5s width ease 0.5s, .0s height ease-in;
-o-transition: .5s width ease 0.5s, .0s height ease-in;
transition: .5s width ease 0.5s, .0s height ease-in;
}
.menu-default ul li .box{
float: left;
width: 50px;
margin-top: -15px;
border-right: 1px solid #dadada;
-webkit-transition: .5s background-color ease;
-moz-transition: .5s background-color ease;
-ms-transition: .5s background-color ease;
-o-transition: .5s background-color ease;
transition: .5s background-color ease;
position: absolute;
height: 100%;
}
.menu-default ul li a{
padding-top:15px;
display:block;
padding-bottom:15px;
text-decoration: none;
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
-ms-transition: .5s all ease;
-o-transition: .5s all ease;
transition: .5s all ease;
font-family:arial;
font-size:15px;
font-weight: bold;
color:#a1a1a1;
width:100%;
}
.menu-default ul li a span{
padding-left: 70px;
padding-right: 20px;
word-wrap:break-word;
display: block;
}
.menu-default ul li a:hover{
background-color: #f4f4f4;
color:#313131;
}
.menu-default ul li a:hover .box{
background-color: #313131;
}
/* Chrome - Opera - Safari */
.menu-default ul li:active, .menu-default ul li:focus{
background-color: #f4f4f4;
outline:0;
color:#313131;
}
.menu-default ul li:active span, .menu-default ul li:focus span{
color:#313131;
}
.menu-default ul li:active .box, .menu-default ul li:focus .box{
background-color:#313131;
}
/* IE - FireFox */
.menu-default ul li a:active, .menu-default ul li a:focus{
background-color: #f4f4f4;
outline:0;
color:#313131;
}
.menu-default ul li a:active span, .menu-default ul li a:focus span{
color:#313131;
}
.menu-default ul li a:active .box, .menu-default ul li a:focus .box{
background-color:#313131;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS3 - Menu</title>
<meta charset="utf-8" />
<link href="inc/css/screen.css" type="text/css" rel="stylesheet" />
<link href="inc/css/normalize.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="menu-default">
<div class="top"></div>
<ul>
<li tabindex="1"><a href="#"><div class="box"></div><span>Home</span></a>
<ul>
<div class="content">
waidhaidjdida
</div>
</ul>
</li>
<li tabindex="1"><a href="#"><div class="box"></div><span>Layouts</span></a></li>
<li tabindex="1"><a href="#"><div class="box"></div><span>Something</span></a></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分:1)
您添加了标记的链接。你的动画是基于li或ul获得焦点但现在链接得到了焦点....很快你删除链接并保持跨度(当然风格不再适用)它工作正常