Dropdown Menu Sorunu

28-04-2019, 05:17:52

Merhaba öncelikle herkese;*
Böyle bir dropdown menu yapıyorum ul li lerle. Fakat bir türlü açılır menüyü hizalayamadım genişliğini vs ayarlayamadım. Yardımcı olur musunuz?
Css Kaynak Kodları:

body{
            scroll-behavior: smooth;
        }
        .header{
            width: 100%;
            height: 200px;
            background-color: #929292;
            position: relative;
            
        }
        ul{
            
            border:3px solid black;
            background-color: #000000;
            position: absolute;
            margin-bottom: 0;
            bottom: 0;
            padding-left: 0;

            
            
        }
        ul li{
            list-style: none;
            float: left;
            margin-left: 2px;
            line-height: 50px;
            border:3px solid;
            text-align: center;
            font-family: "Anton";
            background-color: #FFEA00;
            user-select: none;
            padding-left: 15px;
            padding-right: 15px;



        }
        ul li:hover{
            background-color: #000000;
            color: #FFEA00;
            cursor: pointer;
        }
        #menu1{
            margin-left: 0;
        }
        #acilirMenu ul{
            visibility: hidden;
            
        }
        #acilirMenu{
            position: relative;
        }
        #acilirMenu:hover #aMi{
            visibility: visible;
            position: absolute;
            width: 100%;

        }
        ul li ul li{
            color:white;
}

HTML KAYNAK KODLARI:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="menu-tasarim-1.css">
</head>
<body>
    <div class="header">
        <ul>
            <li id="menu1">Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
            <li>Menu 5</li>
            <li>Menu 6</li>
            <li>Menu 7</li>
            <li>Menu 8</li>
            <li>Menu 9</li>
            <li>Menu 10</li>
            <li>Hakkımızda</li>
            <li>Ekibimiz</li>
            <li id="acilirMenu">Açılır Menu
                <ul id="aMi">
                    <li>Açılır Menu</li>
                    <li>Açılır Menu</li>
                </ul>
            </li>

        </ul>
    </div>

    
    
</body>
</html>

28-04-2019, 05:44:52

#2

Onur89TR

Hazır yapılmış menülere de yönelebilirsiniz. Menünüz -hataları da yok sayarsak- görünüm ve kodlama itibariyle pek iç açıcı durmuyor da.

28-04-2019, 05:57:33

#3

fatihsnsy

Amacım menü hazırlamak değil, her alanda örnekler ve alıştırmalar yaparak pratik ve tecrübe kazanıp becerilerimi geliştirmek

28-04-2019, 06:06:36

#4

Onur89TR

O zaman seni de hazıra kondurmadan bazı ipuçları vereyim. Menünün bir kere linkleri yok. Bu ilk sorun. İkincisi menünde birden fazla kullanılabilecek yerlere id verilmiş. Buna karşın tek olacak header'e class vermişsin mesela. Menünde link olmadığından CSS nin güzel özelliklerinden white-space: nowrap (birden fazla kelimeyi aynı satırda yazdırma) özelliği de yok. "#menu1 > ul > li > ul" içerisine top ve left değerleri girmen gerek. Bunun dışında "ul" 'deki bottom: 0; ne için verilmiş? Oradaki verdiğin yanlış değer bir içerideki ul'ün menü hizasının altından yukarı başlamasına yol açmış. Bunlara dikkat et. Ama dediğim gibi, hazır yapılmış menülere baka baka yaparsan daha şık ve hatasız menülere ulaşırsın. Çalmak denmez buna, feyiz almış olursun...

29-04-2019, 01:03:53

#5

thealiyasar

@fatihsnsy;

Örneği inceleyip ilgili alanlarla oynayıp mantığı kavrayabilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body{
position: fixed;
width: 100%;
height: 100vh;
margin: 0;
font-family: Arial,sans-serif;
}
#siteMenu{
position: relative;
width: 85%;
height: 50px;
margin: 0 auto;
background: #f45511;
border-radius: 10px;
top: 50%;
transform: translateY(-50%);
}
#siteMenu ul{
margin: 0;
padding: 0;
list-style: none;
}
#siteMenu ul li{
position: relative;
display: block;
line-height: 50px;
display: inline-block;
}
#siteMenu ul li a{
padding: 10px;
text-decoration: none;
color: #fff;
font-size: 16px;
}
#siteMenu ul li .subMenu{
position: absolute;
min-width: 200px;
top: 100%;
left: 0;
background: #f45511;
padding: 10px;
border-top: solid 2px white;
display: none;
}
#siteMenu ul li .subMenu li{
display: block;
}
#siteMenu ul li .subMenu li a{
font-size: 14px;
padding: 0;
}
#siteMenu ul li:hover .subMenu{
display: block;
}
</style>
</head>
<body>
<nav id="siteMenu">
<ul>
<li><a href="#">Menu 1</a></li>
<li>
<a href="#">Menu 1</a>
<ul class="subMenu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 1</a></li>
<li>
<a href="#">Menu 1</a>
<ul class="subMenu">
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
</ul>
</nav>
</body>
</html>

30-04-2019, 04:21:47

#6

Onur89TR

İşte çeşit çeşit insan var. Mesela konuyu açan bu arkadaş... O da bir çeşit. Mesajlarımızı beğenmesi veya r10 atması deveye bin takla attırmaktan daha zor gördüğünüz gibi... Ha şahsen öyle bir beklentim yok. Ancak durum öyle bir noktada ki, biz birbirimizin mesajlarını beğenirken, konuyu açan arkadaştan tık olmaması pek de normal karşılanacak bir durum değil.

01-05-2019, 16:25:13

#7

fatihsnsy

Onur89TR adlı üyeden alıntı: mesajı görüntüle

İşte çeşit çeşit insan var. Mesela konuyu açan bu arkadaş... O da bir çeşit. Mesajlarımızı beğenmesi veya r10 atması deveye bin takla attırmaktan daha zor gördüğünüz gibi... Ha şahsen öyle bir beklentim yok. Ancak durum öyle bir noktada ki, biz birbirimizin mesajlarını beğenirken, konuyu açan arkadaştan tık olmaması pek de normal karşılanacak bir durum değil.

Günlerdir bu konu hakkında araştırma yaptığım için ve daha birçok alanda çalışmam olduğu için aklıma gelmiyor bile. Bu boş konuyu bu kadar önemseyeceğini bilseydim beğeni yağmuruna tutardım emin ol. Ayrıca çok çelişkili konuşuyorsun beğeni beklentin yoksa neden böyle bir cevap yazıyorsun mesela. Amacın beğeni toplayıp öne çıkmak mı yoksa bilgi paylaşımı yapmak mı önce buna karar vermelisin bence.