html - Navigation Menu Alignment -
i'm trying create basic drop down menu. i'm having issues alignment. how can sub menu items directly underneath 1 another? example, trying twitter, instagram, , facebook underneath "social". thanks.
https://jsfiddle.net/xalxnder/ostaqgyk/
html
<body> <ul class="main-nav"> <li>home</li> <li>projects</li> <li class="dropdown"> social <ul class="sub"> <li>twitter</li> <li>facebook</li> <li>instagram</li> </ul> </li> </ul> </body> css
body { background: #000000; color: white; } .main-nav { float: left; } .main-nav li { font-size: 10px; display: inline; padding-right: 10px; } .main-nav .sub { color: pink; float: none; z-index: -200; } //** .sub{display: none; } .dropdown:hover > .sub { display: block; position: absolute; }
here's basics of it.
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: black; } ul { list-style-type: none; color: white; } .main-nav >li { display: inline-block; position: relative; padding-right: 10px; } .sub { position: absolute; top: 100%; left: 0; color: pink; /* display:none */ /* disabled demo */ } .dropdown:hover .sub { display:block; } <ul class="main-nav"> <li>home</li> <li>projects</li> <li class="dropdown"> social <ul class="sub"> <li>twitter</li> <li>facebook</li> <li>instagram</li> </ul> </li> </ul>
Comments
Post a Comment