menu103



              HORIZONTAL MENU:     HOR103

VERTICAL MENU
VER101
       HORIZONTAL-VERTICAL:  103

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: HOR103
<html> <head> <style type="text/css"> #hor103 ul{ display: none; list-style:none; } #hor103 li{ list-style-type: none; display: inline; } #hor103 a { float: left; width: 125px; height: 25px; Font: normal 15px Arial; color:#fff; background-color: #b7ddf2; border-left: solid 2px white; display: block; padding: 3px 3px 3px 0; text-decoration:none; text-align:center; } #hor103 a:hover { background-color: white; color: #2586d7; font-weight:bold; border-top: solid 1px #ba90d0; border-left: solid 1px #ba90d0; border-right: solid 1px #ba90d0; border-bottom: solid 1px #ba90d0; letter-spacing:1px; height: 24px; Font: normal 18px Arial; text-align:center; } </style> </head> <body> <ul id ="hor103"> <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: VER103
<html> <head> <style type="text/css"> #ver103 ul{ padding: 2px; } #ver103 li{ list-style-type: none; width:125px; } #ver103 a { Font: normal 15px Arial; color:#fff; background-color: #b7ddf2; display: block; padding: 3px; padding-left: 0px; height: 25px; text-decoration:none; text-align:center; } #ver103 a:hover { background-color: white; color: #2586d7; font-weight:bold; border: solid 1px #ba90d0; letter-spacing:1px; Font: normal 18px Arial; text-align:center; height: 24px; } </style> </head> <body> <ul id ="ver103"> <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>




              HORIZONTAL MENU:     CHECK CODE

No comments:

Click Here To add Comment

Post a Comment