Очень быстро закрывается меню

/*------------------------------------*\
    СБРОС
\*------------------------------------*/
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{
    border:0;
}
address,caption,cite,code,dfn,th,var{
    font-style:normal;
    font-weight:normal;
}
caption,th{
    text-align:left;
}
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}
 
 
 
 
 
/*------------------------------------*\
    ОСНОВНЫЕ ПРАВИЛА
\*------------------------------------*/
html{
    height:101%;
    background:#fff url(/img/css/bg.gif) top left repeat-x;
}
 
 
 
 
 
/*------------------------------------*\
    НАВИГАЦИЯ
\*------------------------------------*/
#nav{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
    display:block;
}
#nav li a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
    
    text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}
#nav li a:hover{
    color:#fff;
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
 
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    opacity:0; /* Устнавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
    background:url(dot.gif);
}
#nav ul a{
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background:#6b0c36;
    background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
    text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    background:#333;
    background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
    text-decoration:underline;
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
}
 
 
 
 
 
/*------------------------------------*\
    ТЕКСТ ДЕМОНСТРАЦИИ
\*------------------------------------*/

.three ul {
  background: #E4EFD1;
}
.three ul a {
  color: #74924C;
}
.three .submenu {
  visibility: hidden;
  opacity: 0;
  background: #BAD78B;
}
.three ul li:hover .submenu {
  visibility: visible;
  opacity: 1;
  }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
nav {
  width: 660px;
  margin: 0 auto 30px;
}
ul {
  list-style: none; 
  margin: 0;
  padding: 0;
}
.topmenu > li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
.topmenu > li:last-child {
  margin-right: 0;
}
a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  outline: none;
  font-family: 'Lora', serif;
  transition: .5s linear;

.on-hover{
width:300px;
background:#176387;
color:#fff;
font-size:25px;
border:3px solid #2BA2DB;
padding:20px;
margin:auto;
margin-bottom:20px;
text-align:center;
}
.hidden-block{
width:300px;
background:#176387;
color:#fff;
font-size:25px;
border:3px solid #2BA2DB;
padding:20px;
margin:auto;
text-align:center;
opacity:0; /*Элемент полностью прозрачный (невидимый)*/
transition: 1s; /*Скорость перехода состояния элемента*/
}
.on-hover:hover+ .hidden-block{
opacity:1;
transition: 1s;
}