</p><style type="text/css">  
   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('/imagenes/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('/imagenes/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('/imagenes/home.gif') no-repeat left -45px;  
  }  

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

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

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

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

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

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

  div#menwrap h2.logout {  
   background: url('/imagenes/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('/imagenes/home.gif');  
  }  

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

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

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

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

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

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

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

  </style>

<div id="menwrap">  
   <div id="ie_height_fix">  
   <h2 class="mail">Почта<span>AllToPC</span></h2>  
   <ul id="menu">  
   <li><a href="#" id="home" class="menitem"><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>Найдется все! ©</span></a></li>  
   <li><a href="#" id="mail" class="menactive"><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="http://alltopc.ucoz.ru" id="logout" class="menitem"><strong>AllToPC</strong> <span>Скрипты и шаблоны для Ucoz</span></a></li>  
   </ul>  
   </div>  
   </div>