MENU102




              HORIZONTAL MENU:     HOR102

VERTICAL MENU
VER101
       HORIZONTAL-VERTICAL:  101

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   CLICK HERE

HORIZONTAL MENU: HOR102
<html> <head> <style type="text/css"> #hor102 ul{ display: none; list-style:none; } #hor102 li{ list-style-type: none; display: inline; } #hor102 li a{ float: left; width: 125px; height: 25px; Font: normal 15px Arial; color: white; background: #a74b4b; display: block; border-left: solid 2px white; padding: 5px ; text-decoration: none; padding-left: 0px; text-align:center; } #hor102 li a:hover { color: black; background: white; font-weight:bold; letter-spacing:1px; text-align:center; } </style> </head> <body> <ul id ="hor102"> <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: VER101
<html> <head> <style type="text/css"> #ver102 ul{ padding: 2px; } #ver102 li{ list-style-type: none; width: 125px; } #ver102 li a{ Font: normal 15px Arial; color: white; background: #a74b4b; display: block; height: 30px; border-left: solid 2px white; padding: 5px ; text-decoration: none; padding-left: 0px; text-align:center; } #ver102 li a:hover { color: black; background: white; font-weight:bold; letter-spacing: 1px; text-align:center; } </style> </head> <body> <ul id ="ver102"> <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>

No comments:

Click Here To add Comment

Post a Comment