css - Hard to position on sub-elements in a drop down menu -

basically, have simple css drop down menu background images links. when hover on element has sub-element , try position on sub-element, it's hard , doesn't work. here's snippet:

css

nav { width: 710px; }  nav ul ul { display: none; }  nav ul li:hover > ul {     display: block; }  nav ul { padding-top: 20px; list-style: none; position: relative; display: inline-table; }  nav ul li {     float: left;     width: 95px;     height: 32px; }     nav ul li {         display: block;         text-indent: -9999em;     }      .element,      .element:hover { width: 95px; height: 32px; }      .home { background-image: url(img/home.png); }     .home:hover { background-image: url(img/home1.png); }   nav ul ul {     padding: 0;     position: absolute;     top: 100%; }     nav ul ul li {         padding: 0;         padding-right: 90px;         position: relative;     }         nav ul ul li {             font-family: arial, helvetica, sans-serif;             color: #fff;             font-size: 16px;             text-transform: uppercase;             text-decoration: none;         }              .sub-element, .sub-element:hover { width: 180px; height: 21px; }              .interiorni { background-image: url(img/interiorni-vrati-active.png); }             .interiorni:hover { background-image: url(img/interiorni-vrati.png); } 

html

<nav>     <ul>         <li><a href="#" class="element home" alt="Начало"></a>             <ul>                 <li><a href="#" class="sub-element interiorni" alt="Интериорни Врати"></a></li>             </ul>         </li>     </ul> </nav> 

what doing wrong? thoughts? thank you.

for image replacement can use technique nicolas gallagher works , used bootstrap http://nicolasgallagher.com/another-css-image-replacement-technique/.
samuel thank's jsfiddle.
said, use child selectors >, because have many parents rules, , rules repetition because of global selectors nav ul.
why use display:inline-table if use float on li after, instead of display:table-cell or display:inline-block? again every li gonna float , have 95px of width etc.

.element,  .element:hover { width: 95px; height: 32px; } 

just before declared link has display:block , parent has same values. need juste leave height value, because block element take 100% of parent's width : i've updated jsfiddle here. hope it's want