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.

jsfiddle

* {    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

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -