style.css
/*****FONTS*****/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
/*****DEMO ONLY*****/
* {
/*margin: 0;
padding: 0;
border: 0;*/
}
::selection {
color: #fff;
background: #3b3b3b;
}
::-moz-selection {
color: #fff;
background: #3b3b3b;
}
a {
color: #3b3b3b;
text-decoration: none;
}
a, #navigation li .sub-nav-wrapper .sub-nav li {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
margin: 0;
padding: 0;
border: 0;
}
#navigation li .sub-nav-wrapper {
pointer-events: none;
opacity: 0;
filter: alpha(opacity=0);
top: 0;
transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
margin: 0;
padding: 0;
border: 0;
}
#navigation li:hover .sub-nav-wrapper {
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
top: 30px;
}
/*****END ANIMATIONS*****/
/*****DROPDOWN*****/
#navigation {
position: relative;
text-align:left;
margin:0 auto;
background-color:Silver;
}
#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 5px;
}
#navigation li a {
padding: 5px;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main
{
color: #ee4e1d;/*menu color on mouseover*/
}
#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin: 0;
padding: 0;
border: 0;
}
#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 4px;
background: #fff;
border-top: 1px solid #fff;
margin-left:0px;
padding: 0;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li
{
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #d7d7d7;
}
#navigation li .sub-nav-wrapper .sub-nav li a
{
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(255,255,255,1.0);
box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}
#navigation li .sub-nav-wrapper .sub-nav li:hover
{
background: #f5f5f5;
border-bottom: 1px solid #3b3b3b;
/*Setting for submenu on Mouseover
}
/*****END DROPDOWN*****/
Inside head
<link href="NewDropDownMenu/style.css" rel="stylesheet" type="text/css"/>
inside body
<table style="width:100%;margin-top:80px">
<tr>
<td width="10%"></td>
<td width="80%" align="left">
<ul id="navigation">
<li>
<a href="Home.aspx" class="main">Home</a>
</li>
<li>
<a href="ManageNewsClippings.aspx" class="main">NewsClipping</a>
</li>
<li>
<a href="ManageNews.aspx" class="main">News</a>
</li>
<li>
<a href="#" class="main">Gallery</a>
<div class="sub-nav-wrapper">
<ul class="sub-nav">
<li><a href="AddImageGallery.aspx">Add Images</a></li>
<li><a href="ManageImageGallery.aspx">Manage Images</a></li>
</ul>
</div>
</li>
</ul>
</td>
<td width="10%"></td></tr>
<tr>
<td width="10%"></td>
<td width="80%">
<asp:ScriptManager ID="Script1" runat="server"></asp:ScriptManager>
<asp:ContentPlaceHolder id="ContentBody" runat="server">
</asp:ContentPlaceHolder>
</td>
<td width="10%"></td></tr></table>
/*****FONTS*****/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
/*****DEMO ONLY*****/
* {
/*margin: 0;
padding: 0;
border: 0;*/
}
::selection {
color: #fff;
background: #3b3b3b;
}
::-moz-selection {
color: #fff;
background: #3b3b3b;
}
a {
color: #3b3b3b;
text-decoration: none;
}
a, #navigation li .sub-nav-wrapper .sub-nav li {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
margin: 0;
padding: 0;
border: 0;
}
#navigation li .sub-nav-wrapper {
pointer-events: none;
opacity: 0;
filter: alpha(opacity=0);
top: 0;
transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
margin: 0;
padding: 0;
border: 0;
}
#navigation li:hover .sub-nav-wrapper {
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
top: 30px;
}
/*****END ANIMATIONS*****/
/*****DROPDOWN*****/
#navigation {
position: relative;
text-align:left;
margin:0 auto;
background-color:Silver;
}
#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 5px;
}
#navigation li a {
padding: 5px;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main
{
color: #ee4e1d;/*menu color on mouseover*/
}
#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin: 0;
padding: 0;
border: 0;
}
#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 4px;
background: #fff;
border-top: 1px solid #fff;
margin-left:0px;
padding: 0;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li
{
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #d7d7d7;
}
#navigation li .sub-nav-wrapper .sub-nav li a
{
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(255,255,255,1.0);
box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}
#navigation li .sub-nav-wrapper .sub-nav li:hover
{
background: #f5f5f5;
border-bottom: 1px solid #3b3b3b;
/*Setting for submenu on Mouseover
}
/*****END DROPDOWN*****/
Inside head
<link href="NewDropDownMenu/style.css" rel="stylesheet" type="text/css"/>
inside body
<table style="width:100%;margin-top:80px">
<tr>
<td width="10%"></td>
<td width="80%" align="left">
<ul id="navigation">
<li>
<a href="Home.aspx" class="main">Home</a>
</li>
<li>
<a href="ManageNewsClippings.aspx" class="main">NewsClipping</a>
</li>
<li>
<a href="ManageNews.aspx" class="main">News</a>
</li>
<li>
<a href="#" class="main">Gallery</a>
<div class="sub-nav-wrapper">
<ul class="sub-nav">
<li><a href="AddImageGallery.aspx">Add Images</a></li>
<li><a href="ManageImageGallery.aspx">Manage Images</a></li>
</ul>
</div>
</li>
</ul>
</td>
<td width="10%"></td></tr>
<tr>
<td width="10%"></td>
<td width="80%">
<asp:ScriptManager ID="Script1" runat="server"></asp:ScriptManager>
<asp:ContentPlaceHolder id="ContentBody" runat="server">
</asp:ContentPlaceHolder>
</td>
<td width="10%"></td></tr></table>
No comments:
Post a Comment