[CSS] Jak zrobić w CSS poziome menu zbudowane z zakładek

Dzisiaj odrobina wizualizacji ;) Jeżeli potrzebujesz poziomego menu, które ma wygląd zakładek (jak w teczkach) to być może to będzie coś w sam raz dla Ciebie. Menu o którym mowa wygląda tak:

Całość składa się tylko z listy wypunktowanej i odrobiny kodu CSS. Wydaję mi się, że nie ma tam nic trudnego, ale jakbyście mieli jakieś pytanie odnośnie do kodu to piszcie w komentarzach. Na wszystkie pytania chętnie odpowiem.

1. <style>


2. ul, ul li {


3.         display: block;



4.         list-style: none;


5.         margin: 0;



6.         padding: 0;


7. }


8.  


9. ul {


10.         border-bottom: 1px solid #888;



11.         float: left;


12.         width: 100%;



13.         padding-left: 20px;


14.        



15. }


16.  


17. ul li {


18.         float: left;


19.         margin-right: 10px;



20. }


21.  


22.  


23. ul a:link, ul a:visited {


24.   width: 100px;



25.         text-decoration: none;


26.         display: block;



27.         background-color: navy;


28.         color: white;



29.         padding: 5px 10px;


30.         border: 1px solid #888;



31.         position: relative;


32.         top: 1px;



33.         font-weight: bold;


34. }


35.  


36.  #current a {


37.         background-color: #fff;



38.         border-bottom-color: #fff;


39.         color: black;



40. }


41.  


42. ul a:hover {


43.         background-color: #fff;



44.         border-bottom-color: #fff;


45.         color: black;



46.         border-bottom: 1px solid #888;


47. }


48. </style>


49. <ul>



50. <li><a href="#">Zapasy</a></li>


51. <li id="current"><a href="#">Zakupy</a></li>



52. <li><a href="#">Sprzedaż</a></li>


53. <li><a href="#">Logistyka</a></li>



54. </ul>