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:#333;
height:35px;
list-style:none;
margin:0;
padding:0
}
#cssmenu li{float:left;
padding:0
}
#cssmenu li a{background:#333 url('https://lh3.googleusercontent.com/-OtZrMF_j1dE/VKWpwDEHxMI/AAAAAAAAANg/xxvcph-EqYU/w1-h35-no/seperator.gif') bottom right no-repeat;
display:block;
font-weight:normal;
line-height:35px;
margin:0;
padding:0 25px;
text-align:center;
text-decoration:none
}
#cssmenu > ul > li > a{color:#ccc}
#cssmenu ul ul a{color:#ccc}
#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#2580a2 url('https://lh4.googleusercontent.com/-fnu3oMDnpnY/VKWpIq4fHwI/AAAAAAAAANQ/VW_jrbgluDc/w10-h5-no/hover2.png') bottom center no-repeat;
color:#FFF;
text-decoration:none
}
#cssmenu li ul{background:#333;
display:none;
height:auto;
padding:0;
margin:0;
border:0;
position:absolute;
width:225px;
z-index:200;
}
#cssmenu li:hover ul{display:block}
#cssmenu li li{background:url('https://lh5.googleusercontent.com/-KXQjTv8d1s4/VKWqupyQaQI/AAAAAAAAAOU/FZTXZAnroOo/w100-h1-no/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0;
padding:0;
width:225px
}
#cssmenu li:hover li a{background:none}
#cssmenu li ul a{display:block;
height:35px;
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{background:#2580a2 url('https://lh6.googleusercontent.com/-MLZS0FAwTmw/VKWrACKPVCI/AAAAAAAAAOk/9ffPFBBObXw/w5-h10-no/hover_sub.png') center left no-repeat;
border:0;color:#fff;
text-decoration:none
}
#cssmenu p{clear:left
}
</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