5 saattir açılır menü yapamadım

Arkadaşlar 5 saattir uğraşıyorum kafayı yicem açılır menü yapamadım ; yapılması gereken kodlar bunlar yardımcı olursanız gerçekten çok sevinirim. Menü 1 ve menü 2 nin altına onlara benzeyen menülerin sıralanmasını istiyorum

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
/*- Menu Tabs --------------------------- */ 	

#menu {
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
	padding: 5px 0 0 15px;
	list-style-type: none;
	background-color: #eee;
	font-size: 13px;
	height: 37px;
	border-top: 2px solid #eee;
}
#menu li {
	float: left;
	margin: 0;				
}
#menu li a {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    background-color: #D6D9DB;
    color: #3C4349;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 33px;
	margin: 0 10px 0 0;
	text-decoration:none;
}
#menu li a:hover, #menu li.active a {
	background-color: #0096FF;
	color: #fff;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {
	position:relative;
	left:-16px;
	padding:0px;
	background-color:#eeeeee;
	width:960px;
}
#menu_wrapper .left {float: left; height: 44px; width: 12px;}

--></style>
<ul id="menu">
<li class="active"><a href="index.html">menu 1</a></li>
<li>
<a href="kategori/1.html">menu 2</a>
</li>

Pc de olsam hallederdik hocam, http://www.codeprex.com/yatay-cok-ka...ilir-menu-css/ bunu bir dener misiniz.

hocam netteki tüm kaynaklara baktım o site dahil, baştan yapmak kolay ama ben elimdeki mevcut bir menüyü açılır hale getirmek istiyorum. ve css konusunda o kadar bilgim yok tekrar gözden geçiricem uğraşıyorum hala ilginize teşekkür ederim.

Yarına kadar yapamazsanız PC'de olduğumda yardimci olmaya çalışırım hocam.

Çok teşekkür ederim hocam yapamazsam bildiririm.

Hocam şimdi açılır menüyü hangi menünün altına yapıcaksanız onun içerisindeki li'de tekrardan açılacak olan menüyü yerleştiriyorsunuz ana menüye position:relative veriyorsunuz ve açılacak olan menüyede bir class atayıp ona position:absolute vericeksiniz ve margin-top ile ayarlamanızı yapıyorsunuz üzerine gelince açılmasını istiyorsanız da ana menüde üzerine gelinecek menünün kaçıncı li olduğunu öğrenip..

.menu ul li:nth-child(menünün sırası) a:hover ul.açılacak menünün classı(display:block) diyorsunuz ama açılacak menü ilk seferde display:none yapmanız gerekmektedir.

<div class="menu">
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                    <li><a href="#">Ürünler</a>
                        <ul class="acilan">
                            <li><a href="#">Sulama</a></li>
                            <li><a href="#">YEM</a></li>
                            <li><a href="#">Peyzaj</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Uygulamalar</a></li>
                    <li><a href="#">İletişim</a></li>
                </ul>
            </div>

.menu ul li {float:left;padding-left:5px;position:relative;}
.menu ul li:nth-child(3):hover ul.acilan {display:block;}

.menu ul.acilan {background:#fff;width:55px;position:absolute;top:0;display:none;margin-top:15px;}

Anlatmak istediğim şey buradaki örnek gibi hocam kolay gelsin

Hocam menünün üstüne gelince altında açılır menü açtırdım sonunda fakat yan yana açılıyor alt alta ana menü hizasında nasıl açtırabilirim ?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
/*- Menu Tabs --------------------------- */ 	

#menu {
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
	padding: 5px 0 0 15px;
	list-style-type: none;
	background-color: #eee;
	font-size: 13px;
	height: 37px;
	border-top: 2px solid #eee;
}
#menu li {
	float: left;
	margin: 0;				
}
#menu li a {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    background-color: #D6D9DB;
    color: #3C4349;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 33px;
	margin: 0 10px 0 0;
	text-decoration:none;
}
#menu li a:hover, #menu li.active a {
	background-color: #0096FF;
	color: #fff;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {
	position:relative;
	left:-16px;
	padding:0px;
	background-color:#eeeeee;
	width:960px;
}
#menu_wrapper .left {float: left; height: 44px; width: 12px;}
ul#menu li ul { 
    display: none; 
    position: absolute; 
    top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */ 
    left: 0; 
}
ul#menu li > ul { 
    top: auto; 
    left: auto; 
}
ul#menu li:hover ul { 
    display: block;
	
}


--></style>
<ul id="menu">
<li><a href="index.html">menu 1</a>
<ul> 
        <li><a href="#">alt menu1 </a></li> 
        <li><a href="#">alt menu2</a></li> 
        <li><a href="#">alt menu3</a></li> 
    </ul> 
</li>
<li>
<a href="kategori/1.html">menu 2</a>
</li>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>Açılır Menü</title>
</head>
<body>
  
<style type="text/css">
*{margin: 0;    padding: 0;    border: 0;    outline: 0;    list-style:none; text-decoration:none;}
.acilir-menu{
    font-family: Arial, sans-serif;  font-weight: bold;  text-transform: uppercase;  margin: 0px;  padding: 5px 0 0 15px;  list-style-type: none;  background-color: #eee;  font-size: 13px;  height: 37px;  border-top: 2px solid #eee;
    }
  
.acilir-menu a{
    border-radius: 2px;  -moz-border-radius: 2px;  -webkit-border-radius: 2px;  background-color: #D6D9DB;  color: #3C4349;  display: inline-block;  font-size: 12px;  font-weight: bold;  padding: 8px 33px;  margin: 0 10px 0 0;  text-decoration: none;
    }
      
.acilir-menu a:hover{
    background:#0096FF; color: #fff;;
    }
  
  
  
.acilir-menu  li{
    width:auto;
    height:46px;
    float:left;
    position:relative;
    }
  
.acilir-menu  ul li ul{
    width: 229px;
    height:auto;
    float:left;
    position:absolute;
    top: 36px;
    left:1px;
    z-index:1;
    display:none;
    }
  
.acilir-menu  ul li ul a{
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   background-color: #D6D9DB;
   color: #3C4349;
   display: inline-block;
   font-size: 12px;
   font-weight: bold;
   padding: 8px 33px;
   text-decoration: none;
    width:163px;
      
      
   line-height: 18px;
      
    }
  
.acilir-menu  ul li ul li {
    height:30px;
    line-height:30px;
	margin-bottom:12px;
    }
  
  
  
.acilir-menu  li:hover >  ul{
    display: block;
    }
  
.acilir-menu  ul li ul li ul{
    width:180px;
    height:auto;
    float:left;
    position:absolute;
    top:0px;
    left:180px;
    z-index:1;
    display:none;
    }
</style>
  
<div class="acilir-menu">
    <ul id="menu">
       <li><a href="index.html">MENÜ 1</a>
             <ul>
                <li><a href="#">Açılır Menü</a></li>
                <li><a href="#">Açılır Menü</a></li>
                <li><a href="#">Açılır Menü</a></li>
                <li><a href="#">Açılır Menü</a></li>
            </ul>
        </li>
        <li><a href="#">MENÜ 2</a>
          <ul>
                <li><a href="#">Açılır Menü</a></li>
                <li><a href="#">Açılır Menü</a></li>
                <li><a href="#">Açılır Menü</a></li>
                <li><a href="#">Açılır Menü</a></li>
            </ul>
      </li>
    </ul>
</div>
    
</body>
</html>