Emre19 adlı üyeden alıntı

CSS'ye yeni başladım ama bunu Yaptım Bence Daha Güzel Duruyor


.menu{
list-style-type:none;
margin:0;
padding:0;
width:750px;
height:35px;
background-color:grey;
float:left;
}
.menu a{
width:auto;
height:35px;
font-size:15px;
color:white;
padding-left:20px;
padding-right:20px;
line-height:35px;
float:left;
text-decoration:none;
font-family:Arial Black, Helvetica, sans-serif;
}
.menu li:hover{
background-color:green;
text-decoration:none;
font-family:Arial Black, Helvetica, sans-serif;
}
.menu li{
position:relative;
list-style-type:none;
width:auto;
float:left;
text-decoration:none;
font-family:Arial Black, Helvetica, sans-serif;
}
.menu li ul.sub-menu{
position:absolute;
width:150px;
height:auto;
top:35px;
margin:0;
padding:0;
display:none;
background-color: orange;
text-decoration:none;
font-family:Arial Black, Helvetica, sans-serif;
}
.menu li:hover > ul.sub-menu{
display: block;
}

.menu li:hover > ul.sub-menu li:hover > ul{
left:150px;
margin-top: -35px;
}

.menu li ul li {width:100%;}


:) font-family ile olaya renk katmışsın şuanki hazırladığım menü sadece öğrenmek ve insanlara da göstermek için. video dersler çekiyorum html ve css ile ilgili. bu yüzden insanlara bunu anlatacak bir örnek tasarladım ben de kendi kodlarımın son halini paylaşayım

.menu{
list-style-type:none;
margin:0;
padding:0;
width:750px;
height:35px;
background-color:grey;
float:left;
}
.menu a{
width:auto;
height:35px;
font-size:15px;
color:white;
padding-left:20px;
padding-right:20px;
line-height:35px;
float:left;
}
.menu li:hover{
background-color:green;
}
.menu li{
position:relative;
list-style-type:none;
width:auto;
float:left;
}
.menu li ul{
position:absolute;
width:150px;
height:auto;
top:35px;
margin:0;
padding:0;
display:none;
background-color:orange;
}
.menu li ul a{
width:110px;
}
.menu li:hover ul{
display: block;
}