Выпадающие меню или подпункты для ярлыков

Здравствуйте мои дорогие читатели). Ох и не легкий для вас будет сегодняшний пост, но поверьте если вы рискнете это сделать - работа будет интересной. А я в свою очередь попробую детально рассказать и описать, что нужно сделать.

И так нашла 2 варианта вертикального меню при нажатии  которого будет "вылетать" подменю.

Первый на мой взгляд примитивный (в качестве дизайна):

 При нажатии меню падает вниз и выдвигает подпункты.
Вот код:

<style type="text/css" media="screen">
{
  margin: 0px;
  padding: 0px;
}
.menu-item {
font-family:Tahoma,Arial,verdana, sans-serif,"Time New Roman";
text-decoration:none;
font-size:15px;
width: 270px;
}
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
    padding: 12px 12px;
  background: #7A8B8B;/цвет коробки/
}
.menu-item h4 a {
font-family:Times New Roman,Georgia,Serif;
  color: #003366;/цвет слов/
  display: block;
  text-decoration: none;
}
.menu-item h4 a:hover {
      color: #FFFFFF;
}
.menu-item ul {

  font-family:Times New Roman,Georgia,Serif;
font-size: 16px;
line-height: 15px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item:hover ul {
  height: 130px;
}
.menu-item ul {
background-color: #454545;
list-style-type: none;
  overflow: hidden;
  height: 0px;
  padding: 0px;
 
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item li {
font-family:Times New Roman,Georgia,Serif;
font-size: 18px;
color:white;
  border-bottom: 1px solid #eee;
padding: 12px 12px;
}
.menu-item ul li:hover {
  background: #000000;
}
.menu-item li a {
  color: #CCFFFF;
}
.menu-item li a:hover {
  color: #00FF00;
}
</style>

<nav>
<div class="menu-item">
<h4><a href="">Вязание</a></h4>
<ul>
<div class="scrollable">
<li><a href="#">Вязание крючком</a></li>
<li><a href="#">Вязание спицами</a></li>
<li><a href="#">Вязание на вилке</a></li> </div> </ul>
</div>
<div class="menu-item">
<h4><a href="">Мое рукоделие</a></h4>
<ul>
<div class="scrollable">
<li><a href="#">Бисероплетение</a></li>
<li><a href="#">Декупаж</a></li>
<li><a href="#">Куклы Тильд</a></li>
</div>
</ul>
</div>
<div class="menu-item">
<h4><a href="">Разное</a></h4>
<ul>
<div class="scrollable">
<li><a href="#">Мой город</a></li>
<li><a href="#">Я</a></li>
<li><a href="#">Мой мир</a></li>
</div>
</ul>
</div>
</nav>

Второе меню более современное, что ли:

Сам код:

<style type="text/css">  <!--
/* CSS Document */
ul#menu-v,
ul#menu-v li,
ul#menu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 260px;
  list-style: none;
}
ul#menu-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
ul#menu-v li {
  float: left;
  display: block !important;
  display: inline;
  position: relative;
  border:#ddcca2 1px solid;
}
ul#menu-v li ul li {
border:none;
border-bottom:#991500 2px solid;
}
/* Root Menu */
ul#menu-v a {
  padding: 0 6px;
  display: block;
  background: #ebe0c7;/цвет коробки/
  color: #991500;/цвет названия рубрик/
  font: bold 12px/28px Verdana, Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%;
}
ul#menu-v a:hover,
ul#menu-v li:hover a,
ul#menu-v li.iehover a {
  background: #991500;
  color: #ebe0c7;
}
/* 2nd Menu */
ul#menu-v li:hover li a,
ul#menu-v li.iehover li a {
  background: #ebe0c7;
  color: #991500;
  border:#ddcca2 1px solid;
}
ul#menu-v li:hover li a:hover,
ul#menu-v li:hover li:hover a,
ul#menu-v li.iehover li a:hover,
ul#menu-v li.iehover li.iehover a {
  background: #991500;
  color: #ebe0c7;
  border:#ebe0c7 1px solid;
}
ul#menu-v ul,
ul#menu-v ul ul,
ul#menu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 240px;
}
ul#menu-v li:hover ul ul,
ul#menu-v li:hover ul ul ul,
ul#menu-v li.iehover ul ul,
ul#menu-v li.iehover ul ul ul {
  display: none;
}
ul#menu-v li:hover ul,
ul#menu-v ul li:hover ul,
ul#menu-v ul ul li:hover ul,
ul#menu-v li.iehover ul,
ul#menu-v ul li.iehover ul,
ul#menu-v ul ul li.iehover ul {
  display: block;
}
-->  </style>
<ul id="menu-v">
    <li><a href="#">Вертикальное</a>
        <ul>
          <li><a href="#">Ссылка 1</a></li>
          <li><a href="#">Ссылка 2</a></li>
        </ul>
    </li>
    <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Ссылка 1</a></li>
          <li><a href="#">Ссылка 2</a></li>
          <li><a href="#">Ссылка 3</a></li>
          <li><a href="#">Ссылка 4</a></li>
          <li><a href="#">Ссылка 5</a></li>
        </ul>
    </li>
    <li><a href="#">Меню</a>
        <ul>
          <li><a href="#">Ссылка 1</a></li>
          <li><a href="#">Ссылка 2</a></li>
        </ul>
    </li>
</ul>

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