html - Css Dropdown menu having difficulties -
i working on website im having problems dropdown menu. when put mouse on menu, wont show child nav. 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!