Стильное горизонтальное css меню

Привет всем я тут решил создать новый урок и решил создать css меню , и так давайте начнем.

Есть несколько способов:

1.  Можно использовать таблицу и процентное отношение каждой ячейки, но способ истинно неловкий, по тому что во-первых таблицы не есть гуд.

2. Использовать списки ul, li. Причем каждому элементу задавать css свойство float:left. Способ довольно достаточно хороший и впрямь славный. Пример в движке WordPress, меню формируется поэтому в таком виде и мы адски легко можем придавать ему всякой стиль и вид.

3. Ну вот я внизу оставлю вам код и css стили чтоб вы могло попробовать сделать так как я и также оставлю ссылку на сам архив меню.

Просмотреть демо

CSS

ul#bluemenu { margin:0; padding:0; list-style-type:none; }

ul#bluemenu li { position:relative; float:left; border-top:5px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#bluemenu .current { border-top:5px solid #3d496a;}

ul#bluemenu li:hover { border-top:5px solid #3d496a;}

ul#bluemenu li a { padding:3px 3px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}

ul#bluemenu li a:hover { color:#8895b8; border:none; }

ul#bluemenu li span{ display:none; position:absolute; top:21px; left:3px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }

ul#bluemenu li a:hover span {margin-top: 8px; display:block; color: #8895b8;}


ul#blue { margin:0; padding:0; list-style-type:none; }

ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#blue .current { border-top:4px solid #3d496a;}

ul#blue li:hover { border-top:4px solid #3d496a;}

ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}

ul#blue li a:hover { color:#8895b8; border:none; }

ul#blue li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }

ul#blue li a:hover span {margin-top: 7px; display:block; color: #8895b8;}

ul#green { margin:0; padding:0; list-style-type:none; }

ul#green li { position:relative; float:left; border-top:4px solid #d7ebd5; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#green .current { border-top:4px solid #3c633c;}

ul#green li:hover { border-top:4px solid #3c633c;}

ul#green li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#3d6c3d;}

ul#green li a:hover { color:#89be89; border:none; }

ul#green li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}

ul#green li a:hover span {margin-top: 7px; display:block; color: #89be89;}

ul#red { margin:0; padding:0; list-style-type:none; }

ul#red li { position:relative; float:left; border-top:4px solid #edcbcb; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#red .current { border-top:4px solid #953434;}

ul#red li:hover { border-top:4px solid #953434;}

ul#red li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#953434;}

ul#red li a:hover { color:#b17878; border:none; }

ul#red li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}

ul#red li a:hover span {margin-top: 7px; display:block; color: #b17878;}

HTML

 <ul id="bluemenu">
<li class="current"><a href="#" title="">Главная<span>здесь можно вставить описания</span></a></li>
<li><a href="#" title="">Об авторе<span>здесь можно вставить описания</span></a></li>
<li><a href="#" title="">Портфолио<span>здесь можно вставить описания</span></a></li>
<li><a href="#" title="">Музыка<span>здесь можно вставить описания</span></a></li>
<li><a href="#" title="">Контакти<span>здесь можно вставить описания</span></a></li>
</ul>

 

Ссылка для скачки исходника Download
Downloaded 15 times

Ну вот и все если будут вопросы пишите в службу поддержки

Источник: pro100design.net