Çözüldü CSS divi diğer divin üstüne nasıl alırız?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

Elontidirax

Picopat
Katılım
12 Mayıs 2021
Mesajlar
604
Çözümler
1
Daha fazla  
Cinsiyet
Kadın
Merhaba, başlık sorunu tamamen anlatmıyor olabilir, sorunum şu; ben bir menu yapıyorum ve menu de dropdown menu tarzı bir şey olacak, fakat hover ile üzerine gelince tamamen yukarı gelmiyor, ben tamamen yukarı gelmesini istiyorum.

menu1.png


Menu bu, bu aşağıda olanda hover ile üzerine gelince olan, fakat ben bu gri div'in tamamının menu kısmını kaplamasını istiyorum, yani şu menu yazan kısımda da gri şey olacak ve menu yazı kısmı görünmeyecek, z-index denedim ama bir işe yaramadı.

menu2.png
 
Son düzenleme:
Çözüm
CSS:
.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
    margin: -75px 0 0 0;
}

Aklıma bu geldi şimdilik.
Kodları atar mısınız?

[CODE lang="html" title="html" highlight="154"]<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class="bar">
<nav id="navbar">
<ul id="navbarlist">
<li id="navbarlinks"><a href="">Menu</a></li>
<li id="navbarlinks"><a href="">Menu</a></li>
<li id="navbarlinks"><a href="">Menu</a></li>
<li id="navbarlinks"><a href="">Menu</a></li>
<li id="navbarlinks" class="categorys">Menu
<div class="category">
<ul>
<li></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</body>
</html>

</html>[/CODE]

[CODE lang="css" title="CSS"]*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

.bar{
background-color: rgb(62, 152, 255);
width: 1000px;
height: 50px;
border: 10px rgb(68, 68, 68) solid;
margin: auto;
box-shadow: 0px 0px 2px black;
position: relative;
}

nav ul{
list-style-type: none;
text-align: center;
}

nav ul li{
float: left;
font-size: 20px;
width: 196px;
height: 36px;
z-index: 1;
}

#navbarlinks:hover{
background-color: rgb(3, 66, 148);
transition-property: all;
transition-duration: 250ms;
}

a{
text-decoration: none;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 76px;
padding-left: 76px;
color: rgb(221, 221, 221);
}

a:hover{
color: rgb(146, 146, 146);
}

.category{
background-color: grey;
height: 500px;
width: 250px;
position: relative;
z-index: 2;
display: none;
transition-property: display;
transition-duration: 2s;
}

.categorys:hover .category{
display: block;
}[/CODE]
 
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div class="bar">
        <nav id="navbar">
            <ul id="navbarlist">
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks" class="categorys">Menu
                    <div class="category">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

</html>

CSS:
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.bar{
    background-color: rgb(62, 152, 255);
    width: 1000px;
    height: 50px;
    border: 10px rgb(68, 68, 68) solid;
    margin: auto;
    box-shadow: 0px 0px 2px black;
    position: relative;
}

nav ul{
    list-style-type: none;
    text-align: center;
}

nav ul li{
    float: left;
    font-size: 20px;
    width: 196px;
    height: 36px;
    z-index: 1;
}

#navbarlinks:hover{
    background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms;
}

#navbarlinks:hover:nth-child(5){
    background-color: gray;
    color: gray;
}
#last:hover{  background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms; }

a{
    text-decoration: none;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 76px;
    padding-left: 76px;
    color: rgb(221, 221, 221);
}

a:hover{
    color: rgb(146, 146, 146);
}

.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
}


.categorys:hover .category{
    display: block;
}
@Elontidirax istediğiniz bu sanırım?
 
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div class="bar">
        <nav id="navbar">
            <ul id="navbarlist">
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks" class="categorys">Menu
                    <div class="category">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

</html>

CSS:
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.bar{
    background-color: rgb(62, 152, 255);
    width: 1000px;
    height: 50px;
    border: 10px rgb(68, 68, 68) solid;
    margin: auto;
    box-shadow: 0px 0px 2px black;
    position: relative;
}

nav ul{
    list-style-type: none;
    text-align: center;
}

nav ul li{
    float: left;
    font-size: 20px;
    width: 196px;
    height: 36px;
    z-index: 1;
}

#navbarlinks:hover{
    background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms;
}

#navbarlinks:hover:nth-child(5){
    background-color: gray;
    color: gray;
}
#last:hover{  background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms; }

a{
    text-decoration: none;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 76px;
    padding-left: 76px;
    color: rgb(221, 221, 221);
}

a:hover{
    color: rgb(146, 146, 146);
}

.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
}


.categorys:hover .category{
    display: block;
}
@Elontidirax istediğiniz bu sanırım?

Yok hocam öyle değil, alta bulunan gri dikdörtgen şekli yukarı getirmek istiyorum, menu yazan kısmın üzerine, menu kısmı görünmeyecek şekilde, ama nasıl getireceğimi anlayamadım.

Şu şekilde painten göstermelik yapmaya çalıştım.

menu2.png


Yerine.


menu2.png
 
CSS:
.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
    margin: -75px 0 0 0;
}

Aklıma bu geldi şimdilik.

Evet hocam böyle, margini "margin: -23px 0 0 0;" yaptığımda tam istediğim gibi oldu, marginin - özelliği olduğunu bilmiyordum, bu bilgi içinde teşekkürler.
 

Geri
Yukarı