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:#333;
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 #eee
}
#cssmenu ul{list-style:none
}
#cssmenu > ul > li{float:left
}
#cssmenu > ul > li.active > a{background:#d9d9d9 url(https://lh4.googleusercontent.com/-3a5oDoQmIF8/VKWkYL6KE8I/AAAAAAAAANA/O1CKfr_T7jg/w5-h68-no/grad_light.png) repeat-x left bottom;
background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));
background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);
box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;
-moz-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;
-webkit-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;
filter:none
}
#cssmenu > ul > li.active a:hover{background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));
background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);
background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);
filter:none
}
#cssmenu > ul > li a{box-shadow:inset 0 0 0 1px #fff;
-moz-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;
background:#bfbfbf url(https://lh4.googleusercontent.com/-3a5oDoQmIF8/VKWkYL6KE8I/AAAAAAAAANA/O1CKfr_T7jg/w5-h68-no/grad_light.png) repeat-x left top;
background:-moz-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(50%,#e5e5e5),color-stop(51%,#d7d7d7),color-stop(100%,#ededed));
background:-webkit-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);
background:-o-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);
background:-ms-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);
background:linear-gradient(to bottom,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);
border-bottom:1px solid #d2d2d2;
border-top:1px solid #d2d2d2;border-right:1px solid #d2d2d2;
line-height:34px;
padding:0 35px;
filter:none
}
#cssmenu > ul > li a:hover{background:#fff url(https://lh4.googleusercontent.com/-3a5oDoQmIF8/VKWkYL6KE8I/AAAAAAAAANA/O1CKfr_T7jg/w5-h68-no/grad_light.png) repeat-x left bottom;
background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(50%,#bfbfbf),color-stop(51%,#b0b0b0),color-stop(100%,#c7c7c7));
background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);
background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);
background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);
background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',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 #d2d2d2
}
#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;
*width:100%
}
#cssmenu .has-sub ul li{text-align:center
}
#cssmenu .has-sub ul li a{border-top:0 none;border-left:1px solid #d2d2d2;display:block;
font-size:12px;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