CSS Vertical Dropdown Menu not working in FF and IE

Question

I'm creating a Vertical Dropdown Menu.

When you click on 1 of the menu items. The Dropdown will go from width:0px to width:500px;

For some reason it will not work in Firefox and IE. Before I started I made it in Jsfiddle.net there it works in every browser.

First menu made in jsfiddle:

Works in Chrome - Firefox - IE - Safari and Opera.
http://jsfiddle.net/DennisBetman/3AyHK/

Official menu paste in jsfiddle:

Works in Chrome - Safari and Opera.
http://jsfiddle.net/DennisBetman/RLb6E/

DEMO:

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;
}

<!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>

Answer 1

You added links to the markup. your animation is based on the li or ul getting focus but now the link gets focus.... als soon as you remove the link and just keep the spans (of course the style doesn't apply anymore then) it works fine