HTML - CSS | position: absolute; command its dont work my nav

Viewed 31

position:absolute code dont working my project. Please help me, i want horizontal menu and dropdown menu in my nav. But i cant maked. My menu bacgrounds openning in my dropdown menu.

my default menu

my dropdown menu ( i dont want, dont working u see background?

my want it is

HTML



<div>
<ul>      
<li><a href="#" title="anasayfa" class="active">ANA SAYFA</a></li>

<li class="dropdown">
    <a class="dp-Btn" href="#" title="bilgisayar">BİLGİSAYAR</a>
    <div class="dp-Content">
        <a href="#" title="cpu">CPU</a>
        <a href="#" title="gpu">GPU</a>
        <a href="#" title="ram">RAM Bellek</a>
        <a href="#" title="ssdhdd">SSD/HDD</a>

    </div>
</li>

<li><a href="#" title="telefon">TELEFON</a></li>
<li><a href="#" title="tvmonitor">TV/MONİTÖR</a></li>
<li><a href="#" title="saat">SAAT</a></li>
<li><a href="#" title="hakkimizda">HAKKIMIZDA</a></li>
</ul>
</div>

CSS

ul{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: grey;
position: fixed;
top: 0px;
width: 100%;
display: table;
text-align: center;
}

li{
    
    float: left;
    border-right: 2px solid rgb(255, 255, 255);
   
}
li:last-child{
    border-right: none;
}

li a{
    
    color:white;
    text-decoration: none;
    padding: 16px 16px;
    display: block;
    font-family:Century Gothic;
    font-size:20px;
    
    
    
} 

a.active{
background-color: crimson;
}

li a:hover:not(.active){
    background-color: crimson;
}


.dp-Content{
    
     display: none;    
     z-index: 1;
     background-color: chartreuse;
     box-shadow: 0 5px 5px 0;
     
     
}

.dropdown:hover .dp-Content{
    display: block;
}
1 Answers

`

ul{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
/* background-color: grey; */
position: fixed;
top: 0px;
width: 100%;
display: table;
text-align: center;
}

li{
    
    float: left;
    border-right: 2px solid rgb(255, 255, 255);
  background-color: grey;
   
}
li:last-child{
    border-right: none;
}

li a{
    
    color:white;
    text-decoration: none;
    padding: 16px 16px;
    display: block;
    font-family:Century Gothic;
    font-size:20px;
    
    
    
} 

a.active{
background-color: crimson;
}

li a:hover:not(.active){
    background-color: crimson;
}


.dp-Content{
    
     display: none;    
     z-index: 1;
/*      background-color: chartreuse; */
     box-shadow: 0 5px 5px 0;
     
     
}

.dropdown:hover .dp-Content{
    display: block;
}
<div>
<ul>      
<li><a href="#" title="anasayfa" class="active">ANA SAYFA</a></li>

<li class="dropdown">
    <a class="dp-Btn" href="#" title="bilgisayar">BİLGİSAYAR</a>
    <div class="dp-Content">
        <a href="#" title="cpu">CPU</a>
        <a href="#" title="gpu">GPU</a>
        <a href="#" title="ram">RAM Bellek</a>
        <a href="#" title="ssdhdd">SSD/HDD</a>

    </div>
</li>

<li><a href="#" title="telefon">TELEFON</a></li>
<li><a href="#" title="tvmonitor">TV/MONİTÖR</a></li>
<li><a href="#" title="saat">SAAT</a></li>
<li><a href="#" title="hakkimizda">HAKKIMIZDA</a></li>
</ul>
</div>

`

Related