html - Css Dropdown menu having difficulties -


i working on website im having problems dropdown menu. when put mouse on menu, wont show child nav. i put mouse on fragrance sets main_nav codes:

.column {   display: inline-block;   vertical-align: top;   font-size: 14px;   line-height: 1.2; }  #main_navigation {   display: inline-block;   list-style-type: none;   margin: auto;   padding: 0;   overflow: hidden;   border: 1px solid #e7e7e7;   background-color: #f3f3f3;   text-align:center;   margin: auto; }  #main_navigation li {   margin-top: 12px;   font-size: 15px;   line-height: 17px;   color: #333;   letter-spacing: 0px;   font-family: 'crimson text'   font-weight: normal;   display:inline-block;   position: relative; }  #main_navigation li {   display: block;   color: #666;   text-align: center;   padding: 14px 16px;   text-decoration: none; } 

and dropdown:

.dropbtn {   color: white;   padding: 16px;   font-size: 16px;   border: none;   cursor: pointer; }  .dropdown {   position: relative;   display: inline-block; }  .dropdown-content {   display: none;   position: absolute;   background-color: #f9f9f9;   min-width: 160px;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }  .dropdown-content {   color: black;   padding: 12px 16px;   text-decoration: none;   display: block; }  .dropdown-content a:hover {   background-color: #f1f1f1; }  .dropdown:hover .dropdown-content {   display: block; } 

and html: (this website make easier using label instead of typing list out myself)

<div id="main_navigation" class="column">   <ul>     {{#navigation}}     <div class="dropdown">       <button class="{{#is_current}}selected{{/is_current}} dropbtn">         <a href="{{url}}">           {{label}}         </a>       </button>       {{#is_current}}       {{! render submenu if has navigation items }}       {{#children?}}       <div class="child_navigation dropdown-content">         {{#children}}         <a href="{{url}}">           {{label}}         </a>         {{/children}}       </div>       {{/children?}}       {{/is_current}}     </div> {{/navigation}} 

still newbie here>< keep trying , still couldn't it.please help!


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo