CSS Basit Yatay Menü Örneği

ravex · 31 Ocak 2020

HTML ve CSS kullanarak basit yatay menü oluşturmak için kodlar. CSS ve HTML kodları oluşturulduğunda aşağıdaki yatay menü oluşacaktır. Menü elemanlarının üzerine gelindiğinde renk değiştirecektir. (hover seçicisi kullanımı)

CSS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>realitycheats.com</title>
       <style>
     body{
      
       margin-top: 90px;
     }
  
     #menu li{
      
       list-style-type: none;
      
      
      
     }
    
     #menu a{
        
       text-decoration: none;
       color: whitesmoke;
       font-weight: 600;
       display: block;
       text-align: center;
       transition: 1s;     
       font-family: calibri,arial,verdana;
       font-size: 20px;
       line-height: 50px;
       background-color: #005555;
       width: 180px;
       margin-right: 1px;
       float: left;
          
    }
    
      #menu span{
       display: block;
       margin-top:-60px;
     }
    
     #menu a:hover{
      
        background-color: #5FD367;
           color: #005555;       
      
     }     
      </style>
</head>
 
<body>
    <div id="menu">
<ul>
<li><a href="#">ANASAYFA</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">BOOTSTRAP</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</div>
</body>
</html>

CSS Basit Yatay Menü Örneği

ravex

Benzer konular