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

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -