(HTML) Menu, submenu a CSS

/* Some stylesheet reset */
#cssmenu > ul{
   list-style: none;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
   line-height: 1;
}

/* The container */
#cssmenu > ul {
   display: block;
   position: relative;
   width: 150px;
}

   /* The list elements which contain the links */
   #cssmenu > ul li {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      width: 150px;   
   }

      /* General link styling */
      #cssmenu > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   padding: 11px 20px;
   
   /* Typography */
   font-family:  "Times New Roman", Times, serif;
   color: #550000;
   text-decoration: none;
   text-transform: normal;
   font-size: 16px;
   font-weight: 1000;
   width: 120px;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: dotted;
   border-bottom-style: dotted;
   border-top-color: #fff;
   border-bottom-color: #d9d9d9;
   text-align: left;
   
   /* Background & effects */
         background: #D7EEFB;
   background-color: #BFD9E8;
      }

      /* Rounded corners for the first link of the menu/submenus */
      #cssmenu > ul li:first-child>a {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-top: 0;
      }

      /* Rounded corners for the last link of the menu/submenus */
      #cssmenu > ul li:last-child>a {
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
         border-bottom: 0;
      }


      /* The hover state of the menu/submenu links */
      #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #FFFF66;
   background: #3385FF;
   background: -ms-linear-gradient(bottom, #2D57FF, #3385FF);
   background: -webkit-linear-gradient(bottom, #2D57FF, #3385FF);
   background: -o-linear-gradient(bottom, #2D57FF, #3385FF);
   background: -moz-linear-gradient(bottom, #2D57FF, #3385FF);
   border-color: transparent;
      }

      /* The arrow indicating a submenu */
      #cssmenu > ul .has-sub>a::after {
         content: '';
         position: absolute;
         top: 16px;
         right: 10px;
         width: 0px;
         height: 0px;
         
         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #3dafea;
      }

      /* The same arrow, but with a darker color, to create the shadow effect */
      #cssmenu > ul .has-sub>a::before {
         content: '';
         position: absolute;
         top: 17px;
         right: 10px;
         width: 0px;
         height: 0px;

         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #fff;
      }

      /* Changing the color of the arrow on hover */
      #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
         border-left: 4px solid #fff;
      }

      #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
         border-left: 4px solid rgba(0, 0, 0, .25);
      }

   
      /* THE SUBMENUS */
      #cssmenu > ul ul {
         position: absolute;
         left: 150px;
         top: -9999px;
         padding-left: 5px;
         opacity: 0;
         /* The fade effect, created using an opacity transition */
         -webkit-transition: opacity .3s ease-in;
         -moz-transition: opacity .3s ease-in;
         -o-transition: opacity .3s ease-in;
         -ms-transition: opacity .3s ease-in;         
      }

      /* Showing the submenu when the user is hovering the parent link */
      #cssmenu > ul li:hover>ul {
         top: 0px;
         opacity: 1;
      }

<div id="cssmenu">
<ul>
   <li><a href='http://www.bozpp.sk'>O nás</a></li>
   <li><a href='../bozp/bozp.htm'>BOZP</a></li>
   <li><a href='#'>Požiarna ochrana</a>
   
      <ul>
        <li><a href='../po/sluzby_po.htm'>Služby TPO</a></li>
           <li><a href='../po/revizie_po.htm'>Revízie, servis</a></li>
           <li><a href='../po/predaj_po.htm'>Predaj pož. tech.</a></li>
           <li><a href='../po/dalsie_po.htm'>Ďalšie služby</a></li>
      </ul>
   </li>
   <li><a href='#'>Školenia</a>
   
   <ul>
        <li><a href='../skolenia/skolenia_bozp.htm'>Školenia BOZP</a></li>
        <li><a href='../skolenia/skolenia_po.htm'>Školenia PO</a></li>
      </ul>
   </li>
   
   <li><a href='../revizie_ez/revizie_ez.htm'>Revízie, inšt. E.Z.</a></li>
   <li><a href='../odpady/odpady.htm'>Odpadové hosp.</a></li>
   <hr />
   <li><a href='../kontakt/kontakt.htm'>Kontakt</a></li>
   
   <li><a href='#'>Prezentácia</a>
   
   <ul>
        <li><a href='../prezentacia/bannery.htm'>Bannery</a></li>
        <li><a href='../prezentacia/reklama.htm'>Reklama</a></li>
      </ul>
   </li>
</ul>
</div>