menu with Focus add text - css

Question

I wanna make a menu very small, so i have the initial letter for each name and i add "focus" but what i want its to appear the full word.
ex:
css:
.menu:focus {
}
php:
<nav>
<li class="menu"><a href="home.php>h</a></li><br>
<li class="menu"><a href="galery.php>g</a></li>
</nav>
and so you simply see the menu like:
h
g
and if you click in h for ex. you would see:
home
g
how can i do it?
and then if click again go to the link page.
is it possible?
edit
php:
<nav>
<li>
<span class="m">
H
</span>
<span class="f">
<a class="menu" href="home.php">
Home
</a>
</span>
</li>
</span>
css:
nav li .f {
display: none;
}
nav li:hover .f {
display: inline;
background-color: #202020;
}
until here ok, you pass by and it shows the full word with the link, but the objective its not just pass by, its to click on it i just change hover to focus and it stops working.
also the hover ".m" display none its not working. it should switch isnt it possible ?
css:
nav li:focus .f {
display: inline;
background-color: #202020;
}
nav li: hover .m {
display: none;
}
Thanks

Answer 1

i have created fiddle for u do you want something like this .
<nav>
<li class="menu">
<a href="home.php">
<span class="test">h</span><span class="test2">ome</span>
</a>
</li>
<li class="menu">
<a href="home.php">
<span class="test">g</span><span class="test2">alery</span>
</a>
</li>
nav li a .test2{display:none}
nav li a:focus .test2, nav li a:hover .test2{display:inline}
OR if you want javascript solution here is code for u
html
<nav class="nav">
<li class="menu">
<a href="javascript:;" data-url="home.php">
<span class="test">h</span><span class="test2">ome</span>
</a>
</li>
<li class="menu">
<a href="javascript:;" data-url="gallary.php">
<span class="test">g</span><span class="test2">alery</span>
</a>
</li>
CSS
nav li.menu a .test2{display:none;}
nav li.menu a .test2.open{display:inline;}
Jquery
$(".nav>li>a").click(function(e) {
var trig = false;
var links = $(this).data("url");
$(this).children(".test2").addClass("open");
if(trig == false){
$(this).click(function(e) {
window.location.href = links;
});
}
});
http://jsfiddle.net/ismailfarooq/p667L2y0/