Mungess - Hepimizin blogu! - Yatay css menuv2

Yatay css menuv2

Bugün sizlere yine bir yatay css menü yaptım;

#menu {

width: 800px;

height: 50px;
border: 2px dotted #c3c3c3;

}

#menu ul {

padding: 0px;

margin: 0px;
list-style-type: none;

}

#menu ul li a {

width: 100px;

height: 50px;

display: block;

text-align: center;

text-decoration: none;

color: #006699;

transition: 2s background-color;

float: left;

line-height: 50px;

}

#menu ul li a:hover {
background-color: #ff0000;
color: #ffffff;

}

Nerede gözükmesini istiyorsanız;

<ul>

<li><a href="#">Mungess </a></li>
<li><a href="#">Mungess </a></li>
<li><a href="#">Mungess </a></li>
<li><a href="#">Mungess </a></li>
<li><a href="#">Mungess </a></li>
<li><a href="#">Mungess </a></li>
<li><a href="#">Mungess </a></li>

</ul>

</div>

NOT: Kalın yerlerle oynama yapınız. Birde "<a href="#"> burda değişiklik yapabilirsiniz. Başka sitelerde bu kodların paylaşımı yasaktır!