Mi a hiba (CSS menü)?

Nem látom a tartalmat, ha ráhúzom az egeret a 2. gombra.

HTML:

<div id="menu">

<ul>

<li><a href="#">1.</a></li>

<li class="1"><a href="#">2.</a></li>

<ul class="2">

<li><a href="#">Dolgozó</a></li>

<li><a href="#">Főnök</a></li>

</ul>

</li>

<li><a href="#">3.</a></li>

</ul><br />

</div>

CSS:

body {

background-color:black;

}

.container {

background-color:white;

margin:0 auto;

width:990px;

padding:3px;

}

#menu {

width: 100%;

}

#menu ul {

list-style-type: none;

background-color: #fff;

}

#menu li {

position: relative;

float: left;

padding:3px;

background-color:brown;

}

#menu li a {

color:white;

}

#menu li:hover {

background-color:red;

}

.2 {

display:none;

}

li.1:hover .2 {

display: block;

}