Drop Down Menu Css
<style type="text/css">
#cssmenu{border:none;
border:0;
margin:0;
padding:0;
font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
width:auto
}
#cssmenu ul{background:#f93;
height:50px;
list-style:none;
margin:0;padding:0;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);
-moz-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);
box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1)
}
#cssmenu li{float:left;
padding:0 0 0 15px
}
#cssmenu li a{color:#000;
display:block;
font-weight:normal;
line-height:50px;
margin:0;
padding:0 25px;
text-align:center;
text-decoration:none
}
#cssmenu li a:hover{background:#c60;
color:#FFF;
text-decoration:none;
-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);
box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)
}
#cssmenu ul li:hover a{background:#c60;
color:#FFF;
text-decoration:none
}
#cssmenu li ul{display:none;
height:auto;padding:0;
margin:0;
border:0;
position:absolute;
width:200px;
z-index:200
}
#cssmenu li:hover ul{display:block
}
#cssmenu li li{display:block;
float:none;
margin:0;
padding:0;
width:200px;
background:#f93;
/*this is where the rounded corners for the dropdown disappears*/
}
#cssmenu li:hover li a{background:none
}
#cssmenu li ul a{display:block;height:50px;
font-size:12px;
font-style:normal;
margin:0;
padding:0 10px 0 15px;
text-align:left
}
#cssmenu li ul a:hover,#cssmenu li ul li:hover a{border:0;
color:#FFF;
text-decoration:none;
background:#c60;
-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);
box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)
}
</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