Drop Down Menu Css
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);
#cssmenu{width:auto
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a{
padding:0;
margin:0;
line-height:1;
font-family:'Source Sans Pro',sans-serif;
font-weight:500;
font-size:16px;
color:#fff;
-webkit-transition:all ease .3s;
-o-transition:all ease .3s;
-moz-transition:all ease .3s;
-ms-transition:all ease .3s;
transition:all ease .3s
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after{content:'';
display:table
}
#cssmenu:after,
#cssmenu > ul:after{clear:both
}
#cssmenu a{text-shadow:0 1px 1px rgba(0,0,0,0.2)
}
#cssmenu ul{background:#3b5998;
border-radius:3px;
border:1px solid #2b4479;
border:1px solid #2d4373;
-webkit-box-shadow:0 1px 2px rgba(2,2,2,0.25),
inset 0 1px 1px rgba(255,255,255,0.15);
-o-box-shadow:0 1px 2px rgba(2,2,2,0.25),
inset 0 1px 1px rgba(255,255,255,0.15);
-moz-box-shadow:0 1px 2px rgba(2,2,2,0.25),
inset 0 1px 1px rgba(255,255,255,0.15);
-ms-box-shadow:0 1px 2px rgba(2,2,2,0.25),
inset 0 1px 1px rgba(255,255,255,0.15);
box-shadow:0 1px 2px rgba(2,2,2,0.25),
inset 0 1px 1px rgba(255,255,255,0.15)
}
#cssmenu ul > li{float:left;list-style:none
}
#cssmenu ul > li > a{display:block;
text-decoration:none;
padding:15px 44px;
position:relative
}
#cssmenu ul > li > a:hover{background:#2d4373;
-webkit-box-shadow:inset 0 0 1px #1e2e4f;
-o-box-shadow:inset 0 0 1px #1e2e4f;
-moz-box-shadow:inset 0 0 1px #1e2e4f;
-ms-box-shadow:inset 0 0 1px #1e2e4f;
box-shadow:inset 0 0 1px #1e2e4f;
-webkit-transition:all ease .3s;
-o-transition:all ease .3s;
-moz-transition:all ease .3s;
-ms-transition:all ease .3s;
transition:all ease .3s
}
#cssmenu ul > li > a:hover:before{content:'';
z-index:2;
position:absolute;
border:1px solid white;
border-top:0;
border-bottom:0;
border-right:0;
width:100%;
height:100%;
top:0;
left:-1px;
opacity:.2
}
#cssmenu ul > li > a:hover:after{content:'';
z-index:2;
position:absolute;
border:1px solid white;
border-top:0;
border-bottom:0;
border-left:0;
width:100%;
height:100%;
top:0;right:-1px;
opacity:.2
}
#cssmenu > ul > li > ul{opacity:0;
visibility:hidden;
position:absolute
}
#cssmenu > ul > li:hover > ul{opacity:1;
visibility:visible;
position:absolute;
border-radius:0 0 3px 3px;
-webkit-box-shadow:none;
-o-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
box-shadow:none
}
#cssmenu > ul > li > ul{width:200px;
position:absolute
}
#cssmenu > ul > li > ul > li{float:none;
position:relative
}
#cssmenu > ul > li > ul > li > ul{opacity:0;
visibility:hidden;
position:absolute
}
#cssmenu > ul > li > ul > li:hover > ul{opacity:1;
visibility:visible;
position:absolute
}
#cssmenu > ul > li > ul > li > ul{left:200px;
top:1px;width:200px
}
#cssmenu > ul > li > ul > li > ul > li{float:none
}
</style>
menus Links
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
div css
<style type="text/css">
#div {
padding: 0px 25px 25px;
background: #fff;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
margin: 20px 300px 100px 200px;
width: 1150px;
height:400px;
}
</style>
edit this div
<div id="div">
<h1>Div Middle <br>WRITE YOUR WEBSITE CONTENT HERE </h1>
<img src="https://lh6.googleusercontent.com/-xA2R1yIkZXA/VKV2H9EUruI/AAAAAAAAAKw/0Ro-IhzLXMA/w1142-h516-no/java9r.png"/>
</div>
0 comments:
Post a Comment