Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

Menü değişik gözüküyor

Konu, 'Web Programlama' kısmında webandyazilimprofesor tarafından paylaşıldı.

  1. webandyazilimprofesor

    webandyazilimprofesor Üye

    Kayıt:
    2 Eylül 2017
    Mesajlar:
    136
    Beğenilen Mesajlar:
    3
    Şehir:
    Ankara
    Merhaba,

    arkadaşlar menü değişik gözüküyor :

    [​IMG]

    Kodlar ise şöyle :

    Kod:
    <div>
                <nav class="menu">
                    <ul>
                        <li><a>Anasayfa<a></li>
                        <li><a>Forum</a>
                        <ul>
                            <li><a>Asp</a></li>
                            <li><a>Python</a></li>
                            <li><a>Php</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>C#</a></li>
                            <li><a>Javascript</a></li>
                            <li><a>Html</a></li>
                            <li><a>Css</a></li>
                            <li><a>Veritabanı</a></li>
                        </ul>
                        </li>
                        <li><a>Testler</a></li>
                        <li><a>Hakkımızda</a></li>
                        <li><a>Anket</a></li>
                        <li><a>İletişim</a></li>
                    </ul>
                </nav>
            </div>
    
    <style>
    
    .menu ul{
    
            list-style: none;
            margin: 0;
            padding: 0;
    
        }
    
        .menu li{
    
            float: left;
            position: relative;
            width: 120px;
    
        }
    
        .menu ul li ul{
    
            display: none;
    
        }
    
        .menu ul li:hover ul{
    
            display: block;
    
        }
    
        .menu ul li a{
    
            text-decoration: none;
            background: #333;
            display: block;
            color: white;
            font-weight: bold;
            font-family: sans-serif;
            text-align: center;
            border-bottom: 2px solid red;
            border-left: 1px solid #595959;
            padding: 5px;
    
        }
    
        .menu ul li ul li a{
    
            background: #595959;
            text-align: left;
            padding: 5px;
            border-bottom: 1px solid #333;
            font-size: .8em;
    
        }
    
        .menu li a:hover{
    
            background: rgb(248, 140, 0);
            transition: .5s;
    
        }
    
        .menu ul li ul li a:hover{
    
            padding-left: 15px;
    
        }
    
        .menu{
    
            position: relative;
            top: 125px;
            left: 10px;
    
        }
    
    </style>
    Bu sorunu nasıl çözebilirim?

    Yardımınıza ihtiyacım var.
     
  2. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    Senin kodu inceleyip hatayı bulması zor.
    Hemen hemen aynı tarz ve aynı kodlar. Tamamını Copy paste yapman yeterli. <a ların href lerine ilgili sayfaların linkleri yazılmalı.

    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        border-bottom: 2px solid red;
    }
    
    li {
        float: left;
    }
    
    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }
    
    li.dropdown {
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a href="#home">Anasayfa</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Forum</a>
        <div class="dropdown-content">
          <a href="#">ASP</a>
          <a href="#">Phyton</a>
          <a href="#">PHP</a>
          <a href="#">ASP.NET</a>
          <a href="#">Java</a>
          <a href="#">C++</a>
        </div>
      </li>
      <li><a href="#news">Testler</a></li>
      <li><a href="#news">Hakkımızda</a></li>
      <li><a href="#news">Anket</a></li>
      <li><a href="#news">İletişim</a></li>
    </ul>
    
    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
    
    </body>
    </html>