Hello Friends,
In these Tutorials we see "How to Build Horizontal CSS Round Menu.
CSS Code :
<style type="text/css"> #menu_hr { background:#141414; width:100%; } #menu_hr ul { width:auto; padding:10px; } #menu_hr ul li { list-style-type:none; display:inline; padding-right:5px; } #menu_hr ul li a { background:#6699cc; padding:7px 15px 7px 15px; text-decoration:none; color:#ffffff; border-radius:20px; } #menu_hr ul li a:hover { background:#006699; padding:7px 15px 7px 15px; text-decoration:none; color:#ffffff; border-radius:20px; } </style>
Create HTML Page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="Example_Menu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> ----- ADD CSS CODE ---- </head> <body> <form id="form1" runat="server"> <div> <div id="menu_hr"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Noftification</a></li> <li><a href="#">Contact US</a></li> </ul> </div> </div> </form> </body> </html>
0 Komentar untuk "Horizontal CSS Round Menu for asp.net"