Wep Siteniz İçin Css Menü Yapımı

2019 Wep  Siteniz  İçin  Css Menü Yapımı

Ön İzleme Adresi

https://codepen.io/bloggeriz/pen/RwbjZVY

CSS Kodları

#menu1 ul {
    list-style:none;
    font-family:'Gill Sans','Gill Sans MT';
    text-transform:uppercase;
    font-size: 28px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
}
#menu1 ul li{
    float:left;
}
#menu1 ul li a{
    display:block;
    text-decoration:none;
    padding:0px 10px 0px 10px;
    width:170px;
    height:55px;
    border-left:8px dotted #fff;
}
#menu1 ul li a span{
    display:block;
}
#menu1 ul li a span.title{
    color:#fff;
}
#menu1 ul li a:hover{
    border-left:8px dotted #fb0303;
}
#menu1 ul li a:hover span.title{
}
#menu1 ul li a span.text{
    color:#fb0303;
    font-size:12px;
    letter-spacing:0px;
    visibility:hidden;
    border-left:16px dotted #fb0303;
    line-height:0px;
    padding-top:4px;
    margin:10px 0px 12px 0px;
}
#menu1 ul li a:hover span.text{
    visibility:visible;
}
*{
    margin:0px;
    padding:0px;
}
body{
    background:#000 ;
    font-family:arial;
}
h1.title{
    width:622px;
    height:108px;
   
}
a.back{
    width:207px;
    height:44px;
    
    display:block;
    clear:both;
    float:left;
    margin-top:40px;
}
.container{
    width:950px;
}
.container h2{
    float:left;
    clear:both;
    margin:30px 10px 10px 10px;
    width:100%;
    color:#fff;
    background-color:#000;
    padding:10px;
}

HTML Kodları

        <div id="menu1">
            <ul>
                <li><a href="">
                        <span class="title">ANA SAYFA</span>
                        <span class="text">ana sayfa</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">PROFİL</span>
                        <span class="text">Detaylı</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Blog</span>
                        <span class="text">Blog Arama</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">İLETİŞİM</span>
                        <span class="text">İletişim Adresi</span>
                    </a>
                </li>
            </ul>
        </div>