Horizontal CSS Round Menu for asp.net

Erukulla's 12:35:00

Horizontal CSS Round Menu

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>
Reactions

Post a Comment

0 Comments