Tuesday 8 May 2012

Make menu using hover(css) in asp.net

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="IEB.master.cs" Inherits="IEB.IEB" %>
<!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>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="CSS/IEBStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <form id="form1" runat="server">
          <div class="header">
        <div class="logo">IEB</div>
</div>
    <div class="welcome"><span id="spWelcomeMsg" runat="server"></span><span>&nbsp;&nbsp;&nbsp;[&nbsp; <%=DateTime.Now.ToLongDateString() %>&nbsp;]&nbsp;&nbsp;</span></div>

    <div class="bodycontent">

        <div class="leftmenu">

            <ul class="sidemenu">

                <a href="Home.aspx"><li>Home</li></a>

                <a href="#"><li>Income</li></a>

                <a href="Expense.aspx"><li>Expenses</li></a>

                <a href="Budget.aspx"><li>Budget</li></a>

                <a href="#"><li>Logout</li></a>

            </ul>

        </div>

        <div class="content">

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>

        </div>

    </div>

    </form>

</body>

</html>

Style sheet:
.sidemenu
{
  padding:15px 5px 5px 5px;
}
.sidemenu a li
{
    list-style:none;

    margin:5px 5px 5px 5px;

    padding:5px 5px 5px 3px;

    text-align:left;

    text-decoration:none;

    border:1px solid white;

    color:White;

    cursor:pointer;
}
.sidemenu li:hover
{
   background-color:White;

    color:#25C2EB !important;

}
.sidemenu a
{
      color:White;

    font-weight:bold;

    text-decoration:none;

}









No comments:

Post a Comment