|
uCoz Community Archives Locked How to make horizontaly menu with hover effect (Tutorial) |
How to make horizontaly menu with hover effect |
Login to Control Panel. And paste the following code in the top part of website.
Code <style type="text/css"> #menu_wrapper { clear: both; height: 50px; margin: 0 auto; background: #990000; } #menu { clear: both; width: 990px; padding: 0 10px; margin: 0 auto; } #menu ul { float: right; margin: 0; padding: 0; list-style: none; } #menu ul li{ padding: 0px; margin: 0px; display: inline; } #menu ul li a{ position: relative; float: left; width: 150px; display: block; height: 30px; padding: 15px 0 0 0; margin-right: 10px; text-align: center; font-size: 14px; text-decoration: none; color: #D2E6F0; font-weight: bold; outline: none; } #menu li a:hover, #menu li .current{ color: #ffffff; background: #4C98BE; } </style> <div id="menu_wrapper"> <div id="menu"> <ul> <li><a href="http://forum.ucoz.com">Home</a></li> <li><a href="index.html">Link 1</a></li> <li><a href="services.html">Link 2</a></li> <li><a href="blog.html">Link 3</a></li> <li><a href="gallery.html">Link 4</a></li> <li><a href="contact.html">Link 5</a></li> </ul> </div> How to customize ? background color: #990000 find the above colors codes in code and replace with your own and change the links. Post edited by CreativeCollusions - Wednesday, 2011-01-05, 8:47 PM
|
| |||
| |||