Drop Down Menu Css
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu,
#cssmenu > ul{background:url(https://lh6.googleusercontent.com/-_gvXt_D4pwY/VKaYM3vJUDI/AAAAAAAAAPs/pSxobKaDH3g/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://lh5.googleusercontent.com/-VJliD0vn_eA/VKaYMyzqnAI/AAAAAAAAAP0/iyjZp7S4FUw/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 #0d0d0d;
text-shadow:0 -1px 0 rgba(0,0,0,0.7);
line-height:18px
}
#cssmenu > ul > li:hover > a{background:url(https://lh6.googleusercontent.com/-_gvXt_D4pwY/VKaYM3vJUDI/AAAAAAAAAPs/pSxobKaDH3g/s100-no/highlight-bg.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77U6LRB5J2xU37aGa8MmjItDpTwic1vxwJ_RwDeCh7mezHZfdR97AoZK92dehrp8uEJqSFI0Jr7das9Qy0e-NThyccqDYGXvv2lp7WXahTp6c4lv12Drqk8oF9aOVQ9duh6QUQCKYiX3N/s1600/hover.png) repeat
}
/* Childs */
#cssmenu > ul ul{opacity:0;
visibility:hidden;
position:absolute;
top:120px;
background:url(https://lh5.googleusercontent.com/-VJliD0vn_eA/VKaYMyzqnAI/AAAAAAAAAP0/iyjZp7S4FUw/s100-no/menu-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:white;
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
}
#cssmenu > ul ul li a:hover{border-left:4px solid #d64e34;
background:url(https://lh3.googleusercontent.com/-4SIakkavzTc/VKaYM3i84UI/AAAAAAAAAPw/ef5sJL9WzDk/s100-no/hover.png) repeat
}
#cssmenu > ul ul li a:active{background:url(https://lh5.googleusercontent.com/-VJliD0vn_eA/VKaYMyzqnAI/AAAAAAAAAP0/iyjZp7S4FUw/s100-no/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