html - Make dropdown stay on hover -

i'm making website school project , have small amount of coding experience before. have heard possible use css achieve dropdown menu without using javascript.

i'm having trouble making dropdown stay on hover, dissappears when mouse goes down li element:

/* configuration of menu width */  html body ul.sf-menu ul,  html body ul.sf-menu ul li {    width: 200px;  }  html body ul.sf-menu ul ul {    margin: 0 0 0 200px;  }  /* framework proper showing/hiding/positioning */    ul.sf-menu,  ul.sf-menu * {    margin: 0;    padding: 0;  }  ul.sf-menu {    display: block;    position: relative;  }  ul.sf-menu li {    display: block;    list-style: none;    float: left;    position: relative;  }  ul.sf-menu li:hover {    visibility: inherit;    /* fixes ie7 'sticky bug' */  }  ul.sf-menu {    display: block;    position: relative;  }  ul.sf-menu ul {    position: absolute;    left: 0;    width: 150px;    top: auto;    left: -999999px;  }  ul.sf-menu ul {    zoom: 1;    /* ie6/7 fix */  }  ul.sf-menu ul li {    float: left;    /* must floated otherwise there rogue 1px margin-bottom in ie6/7 */    width: 150px;  }  ul.sf-menu ul ul {    top: 0;    margin: 0 0 0 150px;  }  ul.sf-menu li:hover ul,  ul.sf-menu li:focus ul,  ul.sf-menu li.sf-hover ul,  ul.sf-menu ul li:hover ul,  ul.sf-menu ul li:focus ul,  ul.sf-menu ul li.sf-hover ul,  ul.sf-menu ul ul li:hover ul,  ul.sf-menu ul ul li:focus ul,  ul.sf-menu ul ul li.sf-hover ul,  ul.sf-menu ul ul ul li:hover ul,  ul.sf-menu ul ul ul li:focus ul,  ul.sf-menu ul ul ul li.sf-hover ul {    left: auto;  }  ul.sf-menu li:hover ul ul,  ul.sf-menu li:focus ul ul,  ul.sf-menu li.sf-hover ul ul,  ul.sf-menu ul li:hover ul ul,  ul.sf-menu ul li:focus ul ul,  ul.sf-menu ul li.sf-hover ul ul,  ul.sf-menu ul ul li:hover ul ul,  ul.sf-menu ul ul li:focus ul ul,  ul.sf-menu ul ul li.sf-hover ul ul,  ul.sf-menu ul ul ul li:hover ul ul,  ul.sf-menu ul ul ul li:focus ul ul,  ul.sf-menu ul ul ul li.sf-hover ul ul {    left: -999999px;  }  /* autoarrows css */    span.sf-arrow {    width: 7px;    height: 7px;    position: absolute;    top: 20px;    right: 5px;    display: block;    background: url(../images/arrows-white.png) no-repeat 0 0;    overflow: hidden;    /* making sure ie6 doesn't overflow , expand box */    font-size: 1px;  }  ul ul span.sf-arrow {    right: 5px;    top: 20px;    background-position: 0 100%;  }  /* theming menu */    ul#nav {    float: left;  }  ul#nav ul {    background: #555;    margin-top: 5px;    padding-bottom: 15px;  }  ul#nav li {    padding: 7px 25px 6px 25px;    font: 170%'yanone kaffeesatz', arial, sans-serif;    text-decoration: none;    color: #000;    margin-right: 2px;  }  ul#nav li a:hover,  ul#nav li a:focus,  ul#nav li.selected a,  ul#nav li.selected a:hover,  ul#nav li.selected a:focus {    color: #09d4ff;    text-shadow: none;  }  ul#nav ul li {    color: #fff;  }  ul#nav ul li a:hover {    color: #09d4ff;    margin-right: 2px;  }  /* image transitions */    ul#images {    margin: 0 15px 10px 0;    padding: 0;    list-style: none;    position: relative;  }  ul#images li {    display: block;    overflow: hidden;    padding: 0;    float: left;    width: 155px;    height: 300px;  }

<nav>    <ul class="sf-menu" id="nav">      <li class="selected"><a href="index.html">home</a>      </li>      <li><a href="form.html"> form </a>      </li>      <li><a href="page.html">a page</a>      </li>      <li><a href="another_page.html">another page</a>      </li>      <li><a href="#">example drop down</a>        <ul>          <li><a href="#">drop down one</a>          </li>          <li><a href="#">drop down two</a>            <ul>              <li>                <img src="arrows-white.png" />              </li>              <li><a href="#">sub drop down one</a>              </li>              <li><a href="#">sub drop down two</a>              </li>              <li><a href="#">sub drop down three</a>              </li>              <li><a href="#">sub drop down four</a>              </li>              <li><a href="#">sub drop down five</a>              </li>            </ul>          </li>          <li><a href="#">drop down three</a>          </li>          <li><a href="#">drop down four</a>          </li>          <li><a href="#">drop down five</a>          </li>        </ul>      </li>      <li><a href="contact.php">contact us</a>      </li>    </ul>  </nav>

your issue have remove margin-top #nav here:-

ul#nav ul {    background: #555;   //margin-top: 5px;   padding-bottom: 15px; } 

that causing space between hovered li , child ul (dropdown) showing.

working code below

html body ul.sf-menu ul,  html body ul.sf-menu ul li {    width: 200px;  }  html body ul.sf-menu ul ul {    margin: 0 0 0 200px;  }  /* framework proper showing/hiding/positioning */    ul.sf-menu,  ul.sf-menu * {    margin: 0;    padding: 0;  }  ul.sf-menu {    display: block;    position: relative;  }  ul.sf-menu li {    display: block;    list-style: none;    float: left;    position: relative;  }  ul.sf-menu li:hover {    visibility: inherit;    /* fixes ie7 'sticky bug' */  }  ul.sf-menu {    display: block;    position: relative;  }  ul.sf-menu ul {    position: absolute;    left: 0;    width: 150px;    top: auto;    left: -999999px;  }  ul.sf-menu ul {    zoom: 1;    /* ie6/7 fix */  }  ul.sf-menu ul li {    float: left;    /* must floated otherwise there rogue 1px margin-bottom in ie6/7 */    width: 150px;  }  ul.sf-menu ul ul {    top: 0;    margin: 0 0 0 150px;  }  ul.sf-menu li:hover ul,  ul.sf-menu li:focus ul,  ul.sf-menu li.sf-hover ul,  ul.sf-menu ul li:hover ul,  ul.sf-menu ul li:focus ul,  ul.sf-menu ul li.sf-hover ul,  ul.sf-menu ul ul li:hover ul,  ul.sf-menu ul ul li:focus ul,  ul.sf-menu ul ul li.sf-hover ul,  ul.sf-menu ul ul ul li:hover ul,  ul.sf-menu ul ul ul li:focus ul,  ul.sf-menu ul ul ul li.sf-hover ul {    left: auto;  }  ul.sf-menu li:hover ul ul,  ul.sf-menu li:focus ul ul,  ul.sf-menu li.sf-hover ul ul,  ul.sf-menu ul li:hover ul ul,  ul.sf-menu ul li:focus ul ul,  ul.sf-menu ul li.sf-hover ul ul,  ul.sf-menu ul ul li:hover ul ul,  ul.sf-menu ul ul li:focus ul ul,  ul.sf-menu ul ul li.sf-hover ul ul,  ul.sf-menu ul ul ul li:hover ul ul,  ul.sf-menu ul ul ul li:focus ul ul,  ul.sf-menu ul ul ul li.sf-hover ul ul {    left: -999999px;  }  /* autoarrows css */    span.sf-arrow {    width: 7px;    height: 7px;    position: absolute;    top: 20px;    right: 5px;    display: block;    background: url(../images/arrows-white.png) no-repeat 0 0;    overflow: hidden;    /* making sure ie6 doesn't overflow , expand box */    font-size: 1px;  }  ul ul span.sf-arrow {    right: 5px;    top: 20px;    background-position: 0 100%;  }  /* theming menu */    ul#nav {    float: left;  }  ul#nav ul {    background: #555;    //margin-top: 5px;    padding-bottom: 15px;  }  ul#nav li {    padding: 7px 25px 6px 25px;    font: 170%'yanone kaffeesatz', arial, sans-serif;    text-decoration: none;    color: #000;    margin-right: 2px;  }  ul#nav li a:hover,  ul#nav li a:focus,  ul#nav li.selected a,  ul#nav li.selected a:hover,  ul#nav li.selected a:focus {    color: #09d4ff;    text-shadow: none;  }  ul#nav ul li {    color: #fff;  }  ul#nav ul li a:hover {    color: #09d4ff;    margin-right: 2px;  }  /* image transitions */    ul#images {    margin: 0 15px 10px 0;    padding: 0;    list-style: none;    position: relative;  }  ul#images li {    display: block;    overflow: hidden;    padding: 0;    float: left;    width: 155px;    height: 300px;  }

<nav>    <ul class="sf-menu" id="nav">      <li class="selected"><a href="index.html">home</a>      </li>      <li><a href="form.html"> form </a>      </li>      <li><a href="page.html">a page</a>      </li>      <li><a href="another_page.html">another page</a>      </li>      <li><a href="#">example drop down</a>        <ul>          <li><a href="#">drop down one</a>          </li>          <li><a href="#">drop down two</a>            <ul>              <li>                <img src="arrows-white.png" />              </li>              <li><a href="#">sub drop down one</a>              </li>              <li><a href="#">sub drop down two</a>              </li>              <li><a href="#">sub drop down three</a>              </li>              <li><a href="#">sub drop down four</a>              </li>              <li><a href="#">sub drop down five</a>              </li>            </ul>          </li>          <li><a href="#">drop down three</a>          </li>          <li><a href="#">drop down four</a>          </li>          <li><a href="#">drop down five</a>          </li>        </ul>      </li>      <li><a href="contact.php">contact us</a>      </li>    </ul>  </nav>