MegaWeb.su как создать свой сайт через html

Как сделать простое, готовое к использованию, горизонтальное выпадающее CSS меню
Самая простая менюшка, проще некуда.
Расписывать тут нечего, просто смотрите как сделано, такую менюшку каждый веб мастер должен уметь делать без подсказок и подсматриваний.

<!--Выпадающее CSS меню от http://megaweb.su/-->
<div id="navigation_panel"> <a href="http://megaweb.su/" title="Главная страница"><img src="menu_home.gif" alt="Главная страница" width="30px" height="30px" /></a>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 1</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 2</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 3</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 4</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 5</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 6</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 7</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <br style="height:1px; clear:both;" />
</div>
<!--/Выпадающее CSS меню от http://megaweb.su/-->

Далее, в свою таблицу CSS вставляем этот код:

/*Выпадающее CSS меню от http://megaweb.su/*/
:-moz-any-link:focus {
outline: none;
}
a
{
                    text-decoration:none;
}
.gor_menu1
{
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    float: left;
                    width: 130px;
                    font: normal 11px verdana;
}
.gor_menu1 li
{
                    position:relative;/**/
                    display:block;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    float: left;
                    width: 130px;
                    font: normal 11px verdana;
}
.gor_menu
{
                    position:absolute;/**/
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    float: left;
                    width: 130px;
                    font: normal 11px verdana;
}
.gor_menu1 span
{
                    border: 1px solid #365799;
                    border-left:none;
                    background: #399;
                    color: #fff;
                    display: block;
                    text-decoration: none;
                    padding: 8px 8px 9px 8px;
                    text-align: center;
}
.gor_menu1 li .gor_menu
{
                    display: none;
}
.gor_menu li a
{
                    border:1px solid #365799;
                    border-top: none;
                    display: block;
                    color: #fff;
                    background: #399; /* IE6 Bug */
                    padding: 5px;
                    text-decoration: none;
                    text-align: left;
                    z-index: 1000;
}
.gor_menu li a:hover
{
                    color: #000;
                    background: #edf5f7;
}
.gor_menu1 li a:hover span
{
                    color: #000;
                    background: #edf5f7;
}
.gor_menu1:hover li .gor_menu
{
                    display: block;
}
#navigation_panel
{
                    width: 950px;
                    text-align:center;
                    margin:0 auto;
}
#navigation_panel a img
{
                    float:left;
                    border: 1px solid #365799;
}
/* Fix IE. Hide from IE Mac \*/
* html .gor_menu li
{
                    float: left;
}
* html .gor_menu li a
{
                    height: 1%;
}
/*Выпадающее CSS меню от http://megaweb.su/ End */

Вот и всё!
Смотреть пример простое готовое к использованию горизонтальное выпадающее CSS меню
Скачать готовый пример простое готовое к использованию горизонтальное выпадающее CSS меню