Drop Down Menu Css
<style type="text/css">
#cssmenu{
border:none;
border:0;
margin:0;
padding:0;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;font-weight:bold;
color:#8e8e8e;
width:auto
}
#cssmenu > ul{margin-top:6px !important
}
#cssmenu ul{background:#CDCDCD;
background:-webkit-linear-gradient(
#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);
background:linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);
border-top:1px solid #A8A8A8;
-webkit-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);
height:27px;
list-style:none;margin:0;padding:0
}
#cssmenu ul ul{
border-top:6px solid #a80329;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none
}
#cssmenu ul ul a{line-height:43px
}
#cssmenu ul ul ul{left:100%;top:0
}
#cssmenu li{float:left;padding:0 8px
}
#cssmenu li a{color:#666;
display:block;font-weight:bold;line-height:30px;
padding:0 25px;
text-align:center;
text-decoration:none
}
#cssmenu li a:hover{color:#000;text-decoration:none
}
#cssmenu li ul{background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;display:none;height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
}
#cssmenu li:hover > ul{display:block
}
#cssmenu li li{display:block;
float:none;
padding:0;
position:relative;
width:225px
}
#cssmenu li ul a{display:block;
font-size:12px;
font-style:normal;padding:0 10px 0 15px;
text-align:left
}
#cssmenu li ul a:hover{background:#949494;
color:#000;opacity:1.0;filter:alpha(opacity=100)
}
#cssmenu p{clear:left
}
#cssmenu .active > a{background:#a80329;
-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;
color:#fff
}
#cssmenu .active > a:hover{color:white
}
</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