menu




              HORIZONTAL MENU:     HOR107


VERTICAL MENU
VER107
       HORIZONTAL-VERTICAL:  107

Both horizontal menu and vertical menu codes are given below. The block width, font, height of block is same for both. In horizontal, li: display is inline; whereas in vertical li a:display is block.You may change these for adjusting the widths, backgrounds.

For more menu examples go to main page.

HORIZONTAL MENU: HOR107
<html> <head> <style type="text/css"> #menu { margin-left: 0px; } #menu ul{ margin: 0;padding: 0; list-style-type: none; font-family: verdana, arial, Helvetica, sans-serif; } #menu li { margin: 0 0 0px 0; display: inline; float: left; margin-left: 1px solid #ffffff; } #menu a{ display: block; padding: 5px 10px; width: 100px; border-right: 2px solid #ffffff; text-decoration: none; border-left: 10px solid #1958b7; color: #fff; background: #2175bc; } #menu a:hover{ color: pink; background: #2586d7; border-left: 10px solid #1c64d1; } </style> </head> <body> <ul id ="menu"> <li> <a href="#" > HOME </a> </li> <li> <a href="#" > ABOUT </a> </li> <li> <a href="#" > CONTACT </a> </li> <li> <a href="#" > DETAILS </a> </li> </ul> </body> </html>

VERTICAL MENU: VER107
<html> <head> <style type="text/css"> #menu { margin-left: 0px; } #menu ul{ margin: 0;padding: 0; list-style-type: none; font-family: verdana, arial, Helvetica, sans-serif; } #menu li { margin: 0 0 1px 0; } #menu a{ display: block; padding: 5px 10px; width: 100px; text-decoration: none; border-left: 10px solid #1958b7; color: #fff; background: #2175bc; } #menu a:hover{ color: pink; background: #2586d7; border-left: 10px solid #1c64d1; } </style> </head> <body> <ul id ="menu"> <li> <a href="#" > HOME </a> </li> <li> <a href="#" > ABOUT </a> </li> <li> <a href="#" > CONTACT </a> </li> <li> <a href="#" > DETAILS </a> </li> </ul> </body> </html>

1 comment:

  1. Nice to share..! Thanks for visited.
    affiliatedotinfo.blogspot.com

    ReplyDelete