html - Adding drop down effect on css menu -
*i exhaustedly searched site answer before posting question, attempted multiple solutions , nothing worked exact codes. while may find duplicate questions on site. don't consider duplicate unless coding same solutions. nothing on site worked exact coding therefore needed post exact code help. *
i have menu looks 1 below. , drop down on it. right nested ul spreads throughout page. needs show in nice drop down section under administration. have tried searching , asking colleagues none of them have done before. have created jsfiddle here: http://jsfiddle.net/z3lpm/
<div id="menu"> <ul> <li><a href="#">home</a></li> <li><a href="#">administration</a> <ul> <li><a href="#">products</a></li> </ul> </li> </ul> </div>
(not full menu point.)
and css:
#menu{ width: 100%; border: 1px solid #000; height: 50px; background-color:#181818; font-family: helvetica, sans-serif; font-size: 13px; } #menu ul{ margin-top: 20px; } #menu ul li{ list-style-type: none; display: inline; margin-left: 50px; } #menu ul li a:link{ color: #fff; text-decoration: none; text-transform: uppercase; padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } #menu ul li a:visited{ color: #fff; text-decoration: none; text-transform: uppercase; } #menu ul li a:hover{ color: #fff; background-color: #81b101; -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); -moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); }
here, didn't change colors or because don't know doing them. let me know if works you.
http://jsfiddle.net/talymo/ldnpg/
#menu{ background-color:#181818; font-family: helvetica, sans-serif; font-size: 13px; height:50px; } #menu ul{ list-style:none; padding-top:15px; } #menu ul li{ padding:0px 20px; width:auto; float:left; position:relative; } #menu ul li:hover > ul{ display:block; } #menu ul li a{ color: #fff; text-decoration: none; text-transform: uppercase; padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } #menu ul li a:hover{ color: #fff; background-color: #81b101; -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); -moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); } #menu ul li ul{ overflow:hidden; padding:0; margin:0; display:none; position:absolute; top:20px; }
Comments
Post a Comment