html css basic navigation menu not working on hover

Question

I just want this navigation to work normally.

<li class="nav-item" data-magellan-arrival="restaurant-menu" title="Restaurant Menu><a     class="scroll" href="#restaurant-menu">Menu </a>
  <ul>
    <li><a href="#">Breakfast</a></li>
    <li><a href="#">Lunch</a></li>
    <li><a href="#">Dinner</a></li>
  </ul>
</li>

I want breakfast lunch and dinner to pop out when I hover over "Menu". When I style the <ul> with display:none; it never comes out and otherwise it shows all the time... Thanks.

Some CSS:

.nav-bar > li {
  float: left;
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 39px;}

ul.flyout, .nav-bar li ul {
  padding: 0;
  list-style: none;}

.top-bar ul {
  margin-left: 0;
  display: inline;
  height: 45px;
  line-height: 10px;
  list-style: none;}

Answer 1

Add this to your CSS:

.nav-item > ul {
  display: none;
}

.nav-item:hover > ul {
  display: block;
  position: absolute;
}

I made an example using your code here: http://jsfiddle.net/jntahqkh/ . The position: absolute; should keep the submenu from interfering with the rest of the content on your site. You might have to play around with it a bit to get it to display correctly in your site, but this should at least get you on the right path. Also, this might not work on mobile devices (Android/iOS)...not sure how they handle :hover selectors or if they even do.

Answer 2

.nav-item > ul > li{
    display: none;
}

.nav-item:hover > ul >li {
    display: block;
}

use the above code in

in this li is hidden when you hover on .nav-item it will show the hidden li