CSS ile dikey menü nasıl yapılır?

egeruzz2424

Femtopat
Katılım
17 Haziran 2023
Mesajlar
23
Daha fazla  
Cinsiyet
Erkek
ul {
list-style-type: none;
width: 120px;
}
ul li a {
text-decoration: none;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
ul li {
padding: 4px;
background-color: #8c8c8c;
}
ul li:hover {
background-color: red;
transition: 0.6s;
}
ul :nth-child(1) {
background-color: red;
}
Yukarıdaki CSS kodu HTML kodunu aşağıdaki gibidir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS DERSLERİ</title>
<link rel="stylesheet" href="index.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Kodda herhangi bir hata bulamadım ama böyle yapınca aşağıdaki gibi oluyor.

1713718699041.png


ul :nth-child(1) {
background-color: red;
}
Kısmına 1 yerine 2, 3 veya 4 yazınca olması gerektiği gibi oluyor ama ben Home kısmını kırmızı yapmak istiyorum.
 

Geri
Yukarı