Drop Down Menu Css
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@charset 'UTF-8';
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul{list-style:none;margin:0;
padding:0
}
#cssmenu > ul{position:relative;
z-index:597;
float:left
}
#cssmenu > ul li{float:left;
min-height:1px;
line-height:1.3em;
vertical-align:middle;
padding:10px
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover{z-index:599;
cursor:default
}
#cssmenu > ul ul{visibility:hidden;
position:absolute;
top:100%;
left:0;
z-index:598
}
#cssmenu > ul ul li{float:none}
#cssmenu > ul li:hover > ul{visibility:visible}
#cssmenu > ul a:link{text-decoration:none
}
#cssmenu > ul a:active{color:#ffa500
}
#cssmenu li{padding:0;
color:#000
}
#cssmenu{font-family:'Lato',sans-serif;
width:auto;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
background:#1b9bff;
font-size:13px;
-moz-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);
-webkit-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);
box-shadow:inset 0 2px 2px rgba(255,255,255,0.3)
}
#cssmenu > ul{padding:0 5px;
-moz-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);
-webkit-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);
box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
display:block;
float:none;
zoom:1
}
#cssmenu > ul:before{content:'';
display:block
}
#cssmenu > ul:after{content:'';
display:table;
clear:both
}
#cssmenu > ul > li{padding:8px 5px
}
#cssmenu > ul > li > a,
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:visited{text-shadow:0 -1px 1px #004881;
color:#fff;
padding:7px 20px;
display:block;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a{background-color:#0082e7
}
#cssmenu li li a{color:#8b8b8b;
font-size:13px
}
#cssmenu li li a:hover{color:#5c5c5c;
border-color:#5c5c5c
}
#cssmenu ul ul{margin:0 10px;
padding:0 10px;
float:none;
background:#efefef;
border:2px solid #1b9bff;
border-top:none;right:0;
left:0;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
-ms-border-radius:0 0 3px 3px;
-o-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
-moz-box-shadow:0 2px 3px rgba(0,0,0,0.2);
-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.2);
box-shadow:0 2px 3px rgba(0,0,0,0.2)
}
#cssmenu ul > li > ul > li{margin:0 10px 0 0;
position:relative;
padding:0;
float:left
}
#cssmenu ul > li > ul > li > a{padding:10px 20px 10px 10px;
display:block
}
#cssmenu ul > li > ul > li.has-sub > a:before{content:'';
position:absolute;
top:18px;
right:6px;
border:5px solid transparent;
border-top:5px solid #8b8b8b
}
#cssmenu ul > li > ul > li.has-sub > a:hover:before{border-top:5px solid #5c5c5c
}
#cssmenu ul ul ul{width:200px;top:100%;
border:2px solid #1b9bff
}
#cssmenu ul ul ul li{float:none
}
</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