css alt menü oluşturma?

Doğru Cevap

• 

  11 yıl önce yazılmış

  bilisimtr

  27 cevap - 6 soru
  Vermiş olduğunuz linkteki örneği tekrar kontrol edebilirsiniz.
  
  

  .ortalax {
      margin: auto;
      width: 930px;
  }
  
  .menu {
      background: url("http://f1209.hizliresim.com/11/c/cwhn5.png") repeat scroll 0 0 #DBDDDF;
      border-top: 1px solid #000;
      height: 40px;
      margin: 0 auto auto;
      width: 100%;
  }
  .menu ul {
      margin: 0;
      padding: 10px 0 8px 5px;
      text-align: left;
  }
  .menu ul li {
  	float:left;
  	list-style:none;
  
  }
  .menu ul li a {
      color: #000;
      font: bold 18px Arial, Helvetica, sans-serif;
      letter-spacing: -1px;
      margin-right: 10px;
      padding: 4px;
      text-decoration: none;
  }
  .menu ul li a:hover {
      color: #fff;
      background-color:#000;
  }
  .menu ul li a.tv {
      background: url("http://f1209.hizliresim.com/11/c/cwhnq.png") repeat scroll 0 0 #000;
      color: #fff;
  }
  
  .sub-menu
  {
      display:none;
  	position:absolute;
      
      
  }
  
  .sub-menu li
  {
  	width:inherit;
  	display: block;
  	float: inherit !important;
  	padding-left:0px;
  	margin-left:0px;
  
      
  }
  
  .sub-menu li a
  {
  	padding-left:0px;
  	margin-left:0px;
  }
  .menu ul li:hover a
  {
   background-color:#000;
   color: #fff;
  }
  .menu ul li:hover .sub-menu
  {
  	display:block;
  }
  

  
  

  <div class="menu">
  
  <div class="ortalax">
  
  <ul>
  <li><a href="http://www.teknogun.com">Anasayfa</a></li>
  <li><a href="http://www.teknogun.com/bolum/internet">İnternet</a>
  <ul class="sub-menu">
          <li><a href="#">Alt Menu 1</a></li>
          <li><a href="#">Alt Menu 2</a></li>
          <li><a href="#">Alt Menu 3</a></li>
      </ul>    
  </li>
  <li><a href="http://www.teknogun.com/bolum/mobil">Mobil</a></li>
  <li><a href="http://www.teknogun.com/bolum/oyun">Oyun</a></li>
  <li><a href="http://www.teknogun.com/bolum/oyun">Nintendo</a></li>
  <li><a href="http://www.teknogun.com/bolum/sosyal-medya">Sosyal Medya</a></li>
  <li><a href="http://www.teknogun.com/bolum/ipucu">iPucu</a></li>
  <li><a href="http://www.teknogun.com/bolum/inceleme">İnceleme</a></li>
  <li><a href="http://www.teknogun.com/bolum/dosyalar">Dosyalar</a></li>
  <li><a class="tv" href="http://www.teknogun.com/bolum/teknotv">TeknoTV</a></li>
  </ul>
  
  </div>
  
  </div>
  

  • olcay
    çok teşekkürler...
    11 yıl önce yazılmış

Cevaplar