Drop Down Menu Css
<style type="text/css">
#cssmenu ul{margin:0;
padding:7px 6px 0;
background:#7d7d7d url(images/overlay.png) repeat-x 0 -110px;
line-height:100%;
border-radius:1em;
font:normal 0.5333333333333333em Arial,Helvetica,sans-serif;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);width:auto
}
#cssmenu li{margin:0 5px;padding:0 0 8px;float:left;
position:relative;list-style:none
}
#cssmenu a,
#cssmenu a:link{font-weight:bold;
font-size:13px;
color:#e7e5e5;
text-decoration:none;display:block;padding:8px 20px;
margin:0;border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
text-shadow:0 1px 1px rgba(0,0,0,0.3)
}
#cssmenu a:hover{background:#000;
color:#fff
}
#cssmenu .active a,
#cssmenu li:hover > a{background:#979797 url(https://lh4.googleusercontent.com/-HJ3VxiuEOCw/VKWVlopgahI/AAAAAAAAALg/qmRUgECaTDs/s0-U-I/overlay.png) repeat-x 0 -40px;
background:#666 url(images/overlay.png) repeat-x 0 -40px;
color:#444;
border-top:solid 1px #f8f8f8;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.2);
text-shadow:0 1px 0 #fff
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a{background:none;
border:none;color:#666;
-webkit-box-shadow:none;
-moz-box-shadow:none
}
#cssmenu ul ul a:hover{background:#7d7d7d url(https://lh4.googleusercontent.com/-HJ3VxiuEOCw/VKWVlopgahI/AAAAAAAAALg/qmRUgECaTDs/s0-U-I/overlay.png) repeat-x 0 -100px;
color:#fff ;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
text-shadow:0 1px 1px rgba(0,0,0,0.1)
}
#cssmenu li:hover > ul{display:block
}
#cssmenu ul ul{display:none;margin:0;
padding:0;
width:185px;
position:absolute;
top:40px;left:0;
background:url(https://lh4.googleusercontent.com/-HJ3VxiuEOCw/VKWVlopgahI/AAAAAAAAALg/qmRUgECaTDs/s0-U-I/overlay.png) repeat-x 0 0;border:solid 1px #b4b4b4;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);
box-shadow:0 1px 3px rgba(0,0,0,0.3)
}
#cssmenu ul ul li{float:none;margin:0;
padding:3px
}
#cssmenu ul ul a,
#cssmenu ul ul a:link{font-weight:normal;
font-size:12px
}
#cssmenu ul:after{content:'.';
display:block;clear:both;visibility:hidden;
line-height:0;height:0}* html
#cssmenu ul{height:1%}
</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