html - I want to make my menu dropdown -
i want make navigation menu dropdown. tried different ways, nothing happend.
this html code:
<ul> <li><a href="index.html">home</a></li> <li><a href="countries.html">geography</a></li> <li><a href="english.html">english</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myfunction()">☰</a> </li> </ul>
and css code:
ul { padding: 15px; margin: -10px; overflow: hidden; list-style-type: none; background-color: #171b29; } li { float: left; } li { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } li a:hover { background-color: #555; } li icon { display: none; } @media screen , (max-width:680px) { ul.topnav li:not(: first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen , (max-width:680px) { ul.topnav.responsive { position: absolute; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li { display: block; text-align: left; } }
when try make dropdown menu, whole menu becomes bad. know code bad reading appreciate if have solution. thank in adva
you should try find answer on http://www.w3schools.com/css/css_dropdowns.asp
webpage have pretty decent content , easy understandable.
Comments
Post a Comment