yatay menu

yatay menu

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>yatay menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id='kapsayici'>
<ul>
   <li class='aktif'><a href='index.html'><span>Anasayfa</span></a></li>
   <li class='listele'><a href='#'><span>Hakkımda</span></a>
      <ul>
         <li class='listele'><a href='#'><span>1</span></a>
            <ul>
               <li><a href='#'><span>1-1</span></a></li>
               <li class='son'><a href='#'><span>1-2</span></a></li>
            </ul>
         </li>
         <li class='listele'><a href='#'><span>2</span></a>
            <ul>
               <li><a href='#'><span>2-1</span></a></li>
               <li class='son'><a href='#'><span>2-2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Galeri</span></a></li>
   <li class='son'><a href='#'><span>iletişim</span></a></li>
</ul>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#kapsayici > ul > li > a {line-height: 48px; }
#kapsayici > ul {*display: inline-block; }
#kapsayici a {background: #333;color: #CBCBCB;padding: 0 20px; }
#kapsayici a {display: block;line-height: 1em;text-decoration: none; }
#kapsayici ul li {float: left;min-height: 1px;vertical-align: middle; }
#kapsayici ul li.listele > a:after {content: '+';margin-left: 5px; }
#kapsayici ul li.hover,#kapsayici ul li:hover {position: relative;z-index: 599;cursor: default; }
#kapsayici ul li.son ul ul {left: auto;right: 99.5%; }
#kapsayici ul li.son ul {left: auto;right: 0; }
#kapsayici ul li:hover > a, #kapsayici ul li.aktif > a {background: #c0110a;color: #FFF; }
#kapsayici ul li:hover > ul {visibility: visible; }
#kapsayici ul ul a {background: #c0110a;color: #FFF;/*border: 1px dashed #850803;*/border-top: 0 none;line-height: 150%;padding: 16px 20px; }
#kapsayici ul ul li {float: none; }
#kapsayici ul ul li {font-weight: normal; }
#kapsayici ul ul li {position: relative; }
#kapsayici ul ul li.listele > a:after {content: '+';position: absolute;top: 50%;right: 15px;margin-top: -8px; }
#kapsayici ul ul li:first-child > a {/*border-top: 1px solid #850803; */}
#kapsayici ul ul li:hover > a {background: #a50b05; }
#kapsayici ul ul li:son-child > a {background-clip: padding-box;}
#kapsayici ul ul li:son-child:hover > a {background-clip: padding-box; }
#kapsayici ul ul ul {border-top: 0 none; }
#kapsayici ul ul ul {top: 0;left: auto;right: -99.5%; }
#kapsayici ul ul {border-top: 4px solid #c0110a;text-transform: none;min-width: 190px; }
#kapsayici ul ul {bottom: 0;left: 0; }
#kapsayici ul ul {margin-top: 0; }
#kapsayici ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%; }
#kapsayici ul {position: relative;z-index: 597; }
#kapsayici ul {text-transform: uppercase; }
#kapsayici ul, #kapsayici li {list-style: none;margin: 0;padding: 0; }
#kapsayici {background: #333;border-bottom: 4px solid #c0110a;font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;font-size: 12px; }
#kapsayici {padding: 0;margin: 0;border: 0; }
#kapsayici:after, #kapsayici ul:after {content: '';display: block;clear: both; }
/* stil */

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono);
hrml,body{margin:0;padding:0;}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( yatay menu ) is write by Ayhan ALTINOK, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Ayhan ALTINOK