menu hover

при наведении на ссылку должен появляться конкретный блок

by Dmitriy Karelin

HTML

<div class="menuhoriz">
 <ul class ="main-menu"> 
   <li><a class="link1" href='#' ><span>Главная</span></a></li>
   <li><a class="link2" href='#'><span>Спальни</span></a></li>
   <li><a href='#'><span>Гостиные</span></a></li>
   <li><a href='#'><span>Кухни</span></a></li>
   <li><a href='#'><span>Мягкая</span></a></li>
   <li><a href='#'><span>Кабинеты</span></a></li>
   <li><a href='#'><span>Корпусная</span></a></li>
   <li><a href='#'><span>Столы</span></a></li>
   <li><a href='#'><span>Комоды</span></a></li>
 </ul>

</div>

<div class = "dop-menu">
     dop menu
</div>

<div class = "dop-menu-2">
     dop menu 2
</div>

CSS

div.menuhoriz {
  border: 0px solid black;
  margin-left: auto; 
  margin-right: auto;
  width: 1024px;
  height: 70px;
  padding: 5px;
  background: #ffdd99;
}
//hover на "Главная"
li a.link1:hover + .dop-menu {
  opacity:1;
}
//hover на "Спальни"
li a.link1:hover + .dop-menu-2 {
  opacity:1;
}

ul {
  list-style: none;
  position: relative;
  margin-top: auto;
}

li a {
  width: 100px;
}

div.dop-menu{
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  width: 1024px;
  height: 250px;
  padding: 5px;
  background-color: green;
  position: relative;
  opacity: 0;
}

div.dop-menu-2 {
  margin-left: auto;
  margin-right: auto;
  margin-top: -260px;
  width: 1024px;
  height: 250px;
  padding: 5px;
  background-color: blue;
  position: relative;
  opacity: 0;
}

.menuhoriz:after, .menuhoriz:before {
  margin-top: 0,5em;
  float:left;
  border:1.5em solid #d6d6c2;
}

.menuhoriz:after {
  border-right-color:transparent;
}

.menuhoriz:before {
  border-left-color:transparent;
}
.menuhoriz a:link, .menuhoriz a:visited { 
  color:#000;
  text-decoration:none;
  float:left;
  height: 4em;
  overflow:hidden;
}
.menuhoriz span {
  background: #ffdd99;
  display:inline-block;
  line-height:3em;
  padding:0 1em;
  margin-top:0.5em;
  position:relative;
  transition: background-color 0.2s, margin-top 0.2s;
}

.menuhoriz a:hover span {
  background:#EFC050;
  margin-top:0;
}

.menuhoriz span:before {
  position:absolute;
  top:3em;
  left:0;
  border-right:0.5em solid #9B8651;
  border-bottom:0.5em solid #fff;
}

.menuhoriz span:after {
  position:absolute;
  top:3em;
  right:0;
  border-left:0.5em solid #9B8651;
  border-bottom:0.5em solid #fff;
}