Помощь по меню?

Question

[Сергей Карвасарный]

Добрый вечер, может кто видел реализацию такой меню -prntscr.com/5qx0k4 , сделал проде половину но проблема начинается со 2 пункта - prntscr.com/5qx19v, должно заливаться до верха.

<div class="additional-menu" style="height: 915px;">
              <ul>
                <li>
                  <ul class="sub-menu" style="height: 915px; display: none;">
                    <li><a href="#">Dental Exams and Cleanings</a></li>
                    <li><a href="#">Fluoride Treatment</a></li>
                    <li><a href="#">Oral Cancer Exams</a></li>
                    <li><a href="#">Oral Hygiene Aides</a></li>
                    <li><a href="#">Sealants</a></li>
                    <li><a href="#">Home Care</a></li>
                  </ul>
                  <a href="#">Cleanings &amp; Prevention</a>
                </li>

.additional-menu {
  float: left;
  vertical-align: top;
  width: 230px;
  overflow: hidden;
  font-size: 18px;
  font-weight: bold;
  background-color: #46AEEB;
  text-shadow: 1px 2px 0 #0E92DC;
}

.additional-menu ul {
  display: inline-block;
  width: 230px;
}

.additional-menu li {
  display: block;
  list-style: none;
}

.additional-menu a {
  display: block;
  color: #fff;
  padding: 21px 18px;
  transition: 0.1s;
}

.additional-menu li:hover a {
  background-color: #432498;
  text-shadow: 1px 2px 0 #2a1479;
  opacity: 1;
}

.additional-menu ul li:hover:after,.additional-menu ul li:hover:before {
  border-color: #432498;
}

.additional-menu ul li:before {
  display: block;
  content: "";
  border-top: 1px solid #27B6EF;
}

.additional-menu ul li:after {
  display: block;
  content: "";
  border-bottom: 1px solid #0E92DC;
}

.additional-menu ul li:last-child:after {
  display: block;
  content: "";
  border-bottom: 1px solid #0E92DC;
  border-top: 1px solid #27B6EF;
}

.additional-menu ul li:first-child:before {
  display: block;
  content: "";
  border-top: none;
}

.additional-menu ul ul.sub-menu {  
  position: absolute;
  display: none;
  width: 230px;
  margin-left: 230px;
  background-color: #432498; 
  text-shadow: 1px 2px 0 #2a1479;
  border-bottom: none;
  z-index: 999;
}

.additional-menu ul ul.sub-menu li:before {
  display: block;
  content: "";
  border-top: 1px solid #2a1479;
}

.additional-menu ul ul.sub-menu li:after {
  display: block;
  content: "";
  border-bottom: 1px solid #3d41a9;
}

.additional-menu ul ul.sub-menu li:last-child:after {
  display: block;
  content: "";
  border-bottom: 1px solid #3d41a9;
  border-top: 1px solid #2a1479;
}

.additional-menu ul ul.sub-menu li:first-child:before {
  display: block;
  content: "";
  border-top: none;
}

.additional-menu ul ul.sub-menu a:hover {
  opacity: 0.7;
}

Answer 1

[IceJOKER]

Два соседних блока с одинаковой высотой(либо у родителя высота фиксированная, а у дочек 100% высота), второй блок невидим.
При наведении на ссылку показываем второй блок и вуаля )
Лучше код+скрин , а не просто скрин

Comments

[Сергей Карвасарный]

блок который с права он выподает, он не всегда там + он аблосют

[IceJOKER]

Сергей Карвасарный: тогда для родителя укажите relative, чтоб дочки были абсолют относительно родителя . больше по этому поводу ничего не пишите, т.к. мои сверхвозможности спят )

Answer 2

[L0k1]

с таким вопросом ожидайте ответ, в котором будем тоже картинка
тут ведь все по скриншотам проблемы лечат