Egyszerű aláhúzott vízszintes menü
2013.08.05. 12:30
Demó:
HTML kód:
<div class="underlinemenu">
<ul>
<li><a href="www.fuckinway.gportal.hu">Home</a></li>
<li><a href="www.fuckinway.gportal.hu">CSS kódok</a></li>
<li><a href="www.fuckinway.gportal.hu">Kódok</a></li>
<li><a href="www.fuckinway.gportal.hu">Design</a></li>
<li><a href="www.fuckinway.gportal.hu">Fórum</a></li>
</ul>
</div>
CSS kód:
<style type="text/css">
.underlinemenu{
font-weight: bold;
width: 100%;
}
.underlinemenu ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: center; /*a menü igazítása pl.: right:jobbra, left:balra, center:középre */
}
.underlinemenu ul li{
display: inline;
}
.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
border-color: #c080a0; /*az aláhúzott border színe inaktív állapotban*/
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black; /*az aláhúzott border színe aktív állapotban*/
border-color: #c0a0a0;
}
</style>
|