Menú desplegable no funciona li:focus

[natwlv]

Hola, generé un menú desplegable de Primer nivel vertical, despliega en vertical al pulsar (activo), tipo acordeón y no me funciona el li:focus. Me gustaría saber si me pueden ayudar en qué estoy haciendo mal o qué me está faltando para que funcione. Probé cambiar el focus por el hover y si funciona, pero se complica esa función al ver la web en la tablet o en smartphones. Gracias.

<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: 250px;border: 0px;border-top: none;background-color:transparent;}
#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {background-color:transparent;border-bottom: 0px;color: #000;border-left: 0px;border-right: 0px;
}
</style>

<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu3"></span></a>
</div>
<nav>
<div id="menu">
<ul>
<br />
<br /><br />
<br />
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/"><img src="http://files.cargocollective.com/524672/Untitled-16-01.png" alt="Luciana Coviello" height="auto" width="150px"><br />ART DIRECTOR / ILLUSTRATOR</a></span>
<br />
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="#"><img src="http://files.cargocollective.com/524672/ILLUSTRATION.png" alt="Illustration" height="auto" width="136px"></a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/color">Color</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/bw">B & W</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/yellow">Yellow dogs</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/people">People</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="#"><img src="http://files.cargocollective.com/524672/ADVERTISING.png" alt="Advertising" height="auto" width="122px"></a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="2"><span class="nivel1">The wines of Pancho Lavaque</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.lucianacoviello.com/felix">Felix</a></li>
<li><a href="http://www.lucianacoviello.com/quara">Quara</a></li>
<li><a href="http://www.lucianacoviello.com/lavaque">Lavaque</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="3"><span class="nivel1">Banco Hipotecario</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.lucianacoviello.com/night">Night flight</a></li>
<li><a href="http://www.lucianacoviello.com/gps">GPS</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="4"><span class="nivel1"><a href="http://www.lucianacoviello.com/1882">1882</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="5"><span class="nivel1">Nextel</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.lucianacoviello.com/bar">Bar</a></li>
<li><a href="http://www.lucianacoviello.com/cocktail">Cocktail</a></li>
<li><a href="http://www.lucianacoviello.com/perro">Perro</a></li>
<li><a href="http://www.lucianacoviello.com/munequito">Muñequito</a></li>
<li><a href="http://www.lucianacoviello.com/gomas">Gomas</a></li>

</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/lucchetti">Lucchetti</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/mundo">Almundo.com</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/quilmes">Quilmes</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<br />
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/prints">OOH / Prints</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/font">Font &amp; Logo Design</a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1 primera" tabindex="1"><span class="nivel1"><a href="http://www.lucianacoviello.com/contact"><img src="http://files.cargocollective.com/524672/CONTACT.png" alt="Contact" height="auto" width="87px"></a></span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>

</ul>
</div>

</nav>
</header>


CSS:
* {
margin:0;
padding:0;
outline: none !important;
}
body {
font-family: 'Brandon_light';
}
#menu {
font-family: 'Brandon_light';
text-align: left;
font-size: 15px;
width: 250px;
margin: 0px;
margin-left:0px;
background-color:rgba(255,255,255,0.8);
padding-left:30px;
padding-right:20px;
display: block;
}
#menu ul { list-style-type: none;

}
#menu ul li.nivel1 {
width: 250px;
}
#menu ul li.primera { border-top: 0px;


}
#menu ul li a, #menu ul li span {display: block;
text-decoration: none;
color: #000;
border: 0px;
border-top: none;
padding: 2px 0px 0px 00px;
position: relative;
}
a:active {position: relative;

}
#menu ul li a:active {
color: #000;
border-bottom: 0px;
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: 250px;

}
#menu ul li a:link:hover ul {display: none;

}
#menu ul li a:active:hover ul {display: block;

}
#menu ul li ul li a {
padding: 0px 0px 0px 20px;
margin-right:0px;
border: none;
border-top: 0px;
font-weight: normal;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: none;
border-bottom: none;
color: #000;
}
#menu ul li ul li.primera {border-top: none;

}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;

}

header{
font-family: 'Brandon_light';
width:250px;
padding-right:30px;
padding-bottom:30px;
position: fixed;
z-index:1;
float:left;
}
header nav {
height:auto;
width:250px;
margin:20px auto;
max-width:1000px;
}
header nav ul{
list-style:none;

}
header nav ul li{


}
header nav ul li a{
color:#000;
padding:2px;
display:block;
text-decoration:none;

}
a{
color:#000;
text-decoration:none;

}
.menu_bar {
display:none;

}


.project_content{

}



@media (min-width: 600px) and (max-width:1600px ) {
header nav {
width:250px;
margin:0;
position:relative;
font-family: 'Brandon_light';


}
header nav ul li{
display:block;

}
.menu_bar{
display:none;
width:250px;

}
.menu_bar bt-menu{
display:none;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position: fixed;
z-index:1;


}
.menu_bar span{
display:none;
font-size:30px;
padding-left:10px;

}
.project_content{
}
}
@media (min-width: 100px) and (max-width: 760px) {
.menu_bar bt-menu{
display:block;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position: fixed;
z-index:1;


}
.menu_bar span{
font-size:30px;
padding-left:10px;

}
.project_content{
}
header nav {
width:250px;
margin:0;
position:relative;
font-family: 'Brandon_light';

}
header nav ul li{
display:block;

}
.menu_bar{
display:block;
width:250px;

}

}