Friday, August 17, 2018

how to create Menu css asp.net | Sradha WebCreations

how to create Menu bar with dropdown menu using  CSS/HTML  asp.net 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HomePage.aspx.cs" Inherits="HomePage" %>

<!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>
    <style>
#mbtnavbar {
    background: #7B68EE;
    width: 100%;
    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
       }
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:bold 12px Helvetica, sans-serif;
   margin: 0;
   padding: 9px 12px 11px 12px;
   text-decoration: none;
   border-right:0px solid #627AAD;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 11px 12px;
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 1px 0 0 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
   }
#mbtnav li li a:hover, #mbtnav li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
   }
#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
    margin: 1px 0 0  -14px
}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id='mbtnavbar'>
          <ul id='mbtnav'>
            <li> <a href='index.html'>Home</a> </li>
          
 <li> <a href='#'>About ▼</a>
                <ul>
                  <li><a href='aboutus.html'>Introduction</a></li>
                 
                  <li><a href='AccountCreation.aspx'>New User</a></li>
                  <li><a href='default7.aspx'>Existing User</a></li>
                 <li><a href='constitution.pdf#'>Constitution</a></li>
                  <li><a href='#'>Gratitude</a></li>   
                </ul>
            </li>

 <li><a href='InstructionToAuthor.html'>Instruction to author</a></li>

            <li> <a href='#'>Journals▼</a>
                <ul>
        <li><a href='submittedJournal.aspx'>Submitted Journal</a></li>
        <li><a href='Journal2011Index-main.html'>2011 Edition</a></li>
        <li><a href='#'>Archieves</a></li>     
               </ul>
            </li>
            </div>
</div>
</form>
</body>
</html>



No comments:

Post a Comment