Drop Down Menu Css
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
#cssmenu,#cssmenu > ul{background:url(https://lh3.googleusercontent.com/-Rz8KbPcTVgc/VKWboJOsW7I/AAAAAAAAAMg/rvrp6Fo_9ek/s100-no/highlight-bg.png) repeat;
padding-bottom:3px;
font-family:'Open Sans',sans-serif;
font-weight:600
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after{content:'';display:table
}
#cssmenu:after,
#cssmenu > ul:after{clear:both}
#cssmenu{width:auto;
zoom:1
}
#cssmenu > ul{background:url(https://lh6.googleusercontent.com/-PPs7S0WVEp8/VKWboorZ2HI/AAAAAAAAAMo/xkuI0yAc1-U/s100-no/menu-bg.png) repeat;
margin:0;
padding:0;
position:relative
}
#cssmenu > ul li{margin:0;
padding:0;
list-style:none
}
#cssmenu > ul > li{float:left;
position:relative
}
#cssmenu > ul > li > a{padding:23px 26px;
display:block;color:white;
font-size:13px;
text-decoration:none;
text-transform:uppercase;
text-shadow:0 -1px 0 #9e3825;
text-shadow:0 -1px 0 rgba(116,37,2,0.7);
line-height:18px
}
#cssmenu > ul > li:hover > a{background:url(https://lh6.googleusercontent.com/-oXtLgQ1FoQE/VKWbnzf6NJI/AAAAAAAAAMk/VK4mtwivETc/s100-no/hover.png) repeat;
text-shadow:0 -1px 0 #97321f;
text-shadow:0 -1px 0 rgba(122,42,26,0.64)
}
#cssmenu > ul > li > a > span{line-height:18px
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active{background:url(https://lh5.googleusercontent.com/-oW7bTDEZ3P4/VKWboOiu_aI/AAAAAAAAAMY/nyhCTMss4_0/s100-no/active.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;
visibility:hidden;
position:absolute;
top:120px;
background:url(https://lh3.googleusercontent.com/-Rz8KbPcTVgc/VKWboJOsW7I/AAAAAAAAAMg/rvrp6Fo_9ek/s100-no/highlight-bg.png) repeat;
margin:0;
padding:0;
z-index:-1
}
#cssmenu > ul li:hover ul{opacity:1;
visibility:visible;
margin:0;
color:#000;
z-index:2;
top:64px;
left:0
}
#cssmenu > ul ul:before{content:'';
position:absolute;
top:-10px;
width:100%;
height:20px;
background:transparent
}
#cssmenu > ul ul li{list-style:none;
padding:0;
margin:0;
width:100%
}
#cssmenu > ul ul li a{padding:18px 26px;
display:block;
color:#393939;
font-size:13px;
text-decoration:none;
text-transform:uppercase;
width:150px;
border-left:4px solid transparent;
-webkit-transition:all 0.35s ease-in-out;
-moz-transition:all 0.35s ease-in-out;
-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;
text-shadow:0 1px 0 white}#cssmenu > ul ul li a:hover{border-left:4px solid #de553b;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZJLy-KYUyr5KdGQC7CUOQ1dNUcGNoXeupc9G62LZepMSjzIyA0KUdsQYsUz1UEP5pQbLL_JoQDrh4sZV2WsLzr_6iaANHeOBYzZb5S_YmoGqmVEfRQOEW1jAxWBHfv0KCfyQrtttK0Lo/s1600/hover.png) repeat;color:white;
text-shadow:0 1px 0 black
}
#cssmenu > ul ul li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQtJVdTF3zURKkeR1BbQ2P2HYmrN7V13PmqE_-hK-OQWrIEhPVHRla3Tfiqv9cmYIw7DpZa96HXULGkhdfbKVuz8bmB8Vqz-X0t4rLlTb1QwzEekJiqVyCdkt5nJXu45JTaNoPBVyYo9S/s1600/menu-bg.png) repeat
}
</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