MENU101




              HORIZONTAL MENU:     HOR107

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: HOR101
<html> <head> <style type="text/css"> #hor101 li a{ width: 125px; Font: normal 15px Arial; color: black; background: #BFEFFF; display: block; height: 25px; border-left: solid 2px white; padding: 5px ; text-decoration: none; padding-left:8px; text-align:center; float: left; } #hor101 li a:hover { color: #000000; background: #f7f2ea; font-weight:bold; letter-spacing: 1px; text-align:center; } #hor 101 ul{ display: none; list-style:none; } #hor101 li{ list-style-type: none; display: inline; } </style> </head> <body> <ul id ="hor101"> <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"> #ver101 ul{ list-style-type: none; padding: 2px; } #ver101 li{ width:125px; } #ver101 li a{ Font: normal 15px Arial; color: black; background: #BFEFFF; display: block; height: 28px; padding: 5px ; text-decoration: none; padding-left:8px; border-width: 1px; } #ver101 li a:hover { color: #000000; font-weight:bold; background: #f7f2ea; letter-spacing: 1px; } </style> </head> <body> <ul id ="ver101"> <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