body {
    margin: 0px;
    padding: 0px;
    text-align: justify;
    font-size: 0.9em;
    font-family: "trebuchet ms", verdana, arial, tahoma, serif;
    color: #666;
    background: #fff url('/img/bg.jpg') repeat-x top left;
   }
     
   a img {
    border: 0px;
    text-decoration: none;
   }
     
   a {
    outline: 0;
   }
     
   p {
    margin: auto;
    margin-top: 10px;
    text-indent: 10px;
    text-align: justify;
    width: 95%;
   }
     
   a:link, a:visited {
    color: #5AA5C9;
    text-decoration: none;
    border-bottom: 1px dotted #5AA5C9;
   }
     
   a:hover, a:active {
    color: #fff;
    background-color: #5AA5C9;
    text-decoration: none;
   }

div#menwrap {
   width: 220px;
   height: 220px;
   margin: 15em auto;
   padding: 0;
   background: #fff url('/background.jpg') no-repeat center 0;
}

div#ie_height_fix {
   width: 1px;
   height: 220px;
   margin: 0;
   padding: 0;
}

/* Dando estilo al header */

div#menwrap h2 {
   position: absolute;
   width: 150px;
   height: 35px;
   margin: 60px 0 0 45px;
   padding: 10px 0 0 0;
   text-align: left;
   font-size: 1.5em;
   z-index: 0;
   text-indent: 45px;
}

div#menwrap h2 span {
   display: block;
   text-indent: 0;
   font-size: .8em;
   width: 90px;
   border-top: 2px solid #abe9ab;
   margin: 5px 0 0 25px;
   padding: 5px 0 0 0;
   color: #666;
   text-align: center;
}

/* Headers */

div#menwrap h2.home {
   background: url('/home.gif') no-repeat left -45px;
}

div#menwrap h2.tutos {
   background: url('/tutos.gif') no-repeat left -45px;
}

div#menwrap h2.files {
   background: url('/files.gif') no-repeat left -45px;
}

div#menwrap h2.search {
   background: url('/search.gif') no-repeat left -45px;
}

div#menwrap h2.mail {
   background: url('/mail.gif') no-repeat left -45px;
}

div#menwrap h2.id {
   background: url('/id.gif') no-repeat left -45px;
}

div#menwrap h2.write {
   background: url('/write.gif') no-repeat left -45px;
}

div#menwrap h2.logout {
   background: url('/logout.gif') no-repeat left -45px;
}

/* Dando estilo a la lista */

ul#menu {
   margin: 50px auto;
   height: 220px;
   padding: 0;
   width: 220px;
   height: 220px;
   list-style: none;
   list-style-type: none;
   position: relative;
}

ul#menu li {
   width: 45px;
   height: 45px;
   margin: 0;
   padding: 0;
   display: block;
   list-style: none;
   list-style-type: none;
   position: absolute;
   z-index: 2;
   font-size: 8pt;
   font-family: verdana, arial, tahoma, serif;
}

/* Fondo en :active y :hover */

   /* Items del menu no activos */
     
   ul#menu a.menitem:link, ul#menu a.menitem:visited {
    background-position: left bottom;
    opacity: .7;
   }
     
   ul#menu a.menitem:hover, ul#menu a.menitem:active {
    background-position: left top;
    background-color: transparent;
    opacity: .9;
   }
     
   /* Items del menu activos */
     
   ul#menu li a.menactive {
    background-position: left top;
    background-color: transparent;
    opacity: 1;
   }

   ul#menu li a.menactive:hover {
    opacity: 1;
   }

/* Esconder informacin */

ul#menu li a.menitem span, ul#menu li a.menitem strong, ul#menu li a.menactive span, ul#menu li a.menactive strong {
   display: none;
}

/* Mostrar informacin en :hover */

ul#menu li a.menitem:hover strong {
   display: block;
   text-align: left;
   position: absolute;
   width: 100px;
   border-bottom: 1px solid #ffdb5e;
   padding: 2px 0 2px 0;
   margin: 0 0 0 5px;
   color: #333;
   left: 50px;
   top: 0;
   z-index: 2;
}

ul#menu li a.menitem:hover span {
   display: block;
   position: absolute;
   width: 120px;
   text-align: left;
   border: 1px solid #ffe897;
   background-color: #ffefb7;
   padding: 20px 2px 2px 2px;
   color: #333;
   left: 50px;
   top: 0;
   z-index: 1;
   opacity: .9;
}

/* Dando estilo a los anchors */

ul#menu a {
   border: 0;
   position: absolute;
   width: 45px;
   height: 45px;
}

#home {
   top: -20px;
   left: 95px;
   background-image: url('/home.gif');
}

#tutos {
   top: 20px;
   left: 170px;
   background-image: url('/tutos.gif');
}

#files {
   top: 90px;
   left: 200px;
   background-image: url('/files.gif');
}

#search {
   top: 155px;
   left: 170px;
   background-image: url('/search.gif');
}

#mail {
   top: 195px;
   left: 95px;
   background-image: url('/mail.gif');
}

#id {
   top: 155px;
   left: 10px;
   background-image: url('/id.gif');
}

#write {
   top: 90px;
   left: -20px;
   background-image: url('/write.gif');
}

#logout {
   top: 20px;
   left: 10px;
   background-image: url('/logout.gif');
}

    <div id="menwrap">
   <div id="ie_height_fix">
   <h2 class="mail">ЛС<span>личные сообщения</span></h2>
   <ul id="menu">
    <li><a href="#" id="home" class="menactive"><strong>Главная</strong> <span>Перейти на главную.</span></a></li>
    <li><a href="#" id="tutos" class="menitem"><strong>Примеры</strong> <span>Уроки жизни.</span></a></li>
    <li><a href="#" id="files" class="menitem"><strong>Архив</strong> <span>Засекреченый архив.</span></a></li>
    <li><a href="#" id="search" class="menitem"><strong>Поиск</strong> <span>Найдется все! (c)</span></a></li>
    <li><a href="#" id="mail" class="menitem"><strong>Почта</strong> <span>Электронка.</span></a></li>
    <li><a href="#" id="id" class="menitem"><strong>Вход</strong> <span>Войти.</span></a></li>
    <li><a href="#" id="write" class="menitem"><strong>Выход</strong> <span>Выйти.</span></a></li>
    <li><a href="#" id="logout" class="menitem"><strong>Рег</strong> <span>Регимся...</span></a></li>
   </ul>
   </div>
   </div>