Drop Down Menu Css
<style type="text/css">
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a{margin:0;
padding:0;
position:relative
}
#cssmenu:after,
#cssmenu ul:after{content:'';
display:block;clear:both
}
#cssmenu a{color:#fff;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;
font-size:12px;
min-width:35px;
text-align:center;
text-decoration:none;text-shadow:0 -1px 0 #333
}
#cssmenu ul{list-style:none
}
#cssmenu > ul > li{float:left
}
#cssmenu > ul > li.active a{background:#646464 repeat-x left bottom;
background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));
background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);
box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;
-moz-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;
-webkit-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;
filter:none
}
#cssmenu > ul > li.active a:hover{
background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));
background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);
background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);filter:none
}
#cssmenu > ul > li a{box-shadow:inset 0 0 0 1px #8a8a8a;-moz-box-shadow:inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow:inset 0 0 0 1px #8a8a8a;
background:#4a4a4a url(images/grad_dark.png) repeat-x left top;
background:-moz-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#626262),color-stop(100%,#787878));
background:-webkit-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);
background:-o-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);
background:-ms-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);
background:linear-gradient(to bottom,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);
border-bottom:1px solid #5d5d5d;
border-top:1px solid #5d5d5d;
border-right:1px solid #5d5d5d;
line-height:34px;
padding:0 35px;filter:none
}
#cssmenu > ul > li a:hover{background:#8a8a8a repeat-x left bottom;
background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(50%,#4a4a4a),color-stop(51%,#3b3b3b),color-stop(100%,#525252));
background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);
background:-o-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);
background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);
background:linear-gradient(to bottom,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);filter:none
}
#cssmenu > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #5d5d5d
}
#cssmenu > ul > li:last-child a{border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0
}
#cssmenu .has-sub:hover ul{display:block
}
#cssmenu .has-sub ul{
display:none;
position:absolute;
top:36px;
left:-1px;
min-width:100%;
text-align:center;
/* IE7 */ *width:100%
}
#cssmenu .has-sub ul li{text-align:center
}
#cssmenu .has-sub ul li a{border-top:0 none;
border-left:1px solid #5d5d5d;
display:block;
line-height:120%;
padding:9px 5px;
text-align:center
}
</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