All nested menus show when hovering over menu instead of just the first

Tags: css

Problem :

I have used this method to centrally align my menu:

I am having problems though with my selectors. The selectors I am using to show the sub menu and style the links is applying to all nested tags.

I have read the + operator selects the next sibling but I've tried things like #menu-main-menu-container li:hover a + ul but it doesn't work. The hover selector is confusing me a bit.

I included the snippet below. Can someone show me how I should be just selecting the first occurrence to display when hovering over the li?

I also have a problem of the second nested submenu not aligning properly but I think that might be due to the way I have centred the menu and not sure if that is fixable or not.

Any help appreciated.

#menu-main-menu-container {
  width: 100%;
  position: relative;
  font: 300 16px/16px Lato, Arial; }
  #menu-main-menu-container ul {
    position: relative;
    text-align: center;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0; }
    #menu-main-menu-container ul ul {
      position: absolute;
      display: none;
      margin-top: 15px; }
      #menu-main-menu-container ul ul ul {
        right: 0; }
  #menu-main-menu-container ul li {
    right: 50%;
    background-color: #f4f4f4; }
  #menu-main-menu-container li {
    list-style: none;
    position: relative;
    float: left;
    padding: 15px;
    margin: 0;
    text-transform: uppercase; }
    #menu-main-menu-container li:hover ul {
      display: block; }
  #menu-main-menu-container a {
    white-space: nowrap;
    text-decoration: none;
    color: blue; }
  #menu-main-menu-container li:hover {
    background-color: blue;
    transition: 1s; }
  #menu-main-menu-container li:hover a {
    color: white; }
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="top-nav-menu.css">
<div id="menu-main-menu-container">

        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
                <li><a href="#">Sub Item 1</a>
                        <li><a href="#">Hidden Sub Item 1</a></li>
                        <li><a href="#">Hidden Sub Item 2</a></li>
                        <li><a href="#">Hidden Sub Item 3</a></li>
                <li><a href="#">Sub Item 2</a></li>

                <li><a href="#">Sub Item 3</a></li>
        <li><a href="#">Item 3</a></li>

Solution :

Maybe with:

#menu-main-menu-container li:hover > ul

Operator >

If you use > operator you ensure that ul must be direct child of li:hover.

    CSS Howto..

    how can I use the CSS selector to solve this [duplicate]

    How do I align my label to the left of my text input box with CSS?

    How to resize div size proportional with browser size?

    How to fix flexbox position:fixed navbar JS/CSS bug

    How to add a value in the y-axis at the bottom of a bar chart-css

    How to create a vertical carousel using plain JavaScript and CSS

    How can I disable the “Up” arrow via CSS

    How to apply css styles to dynamic JavaScript array?

    How can I make the left div expand and the right div have constant width?

    How can I use CSS to vertically center the text in an anchor, within a LI?

    How can I do this menu using list and css?

    How to change angularJS's default css styles? Search box etc

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to create HTML5 popup with minimize etc

    How to align div objects in rows

    How to accomplish this layout with CSS and HTML?

    Jquery UI: How to define different CSS styles for Tabs and Slider on the same page

    How to force div width with CSS to stretch to its content but not to be restricted by its container?

    How to add Video from project directory in the background of Div

    How to center a text line in a navigation bar?

    How can I get my hyperlink in HTML result in same page or window with or without using iframe tag or JavaScript?

    How do you style TextFlow with CSS Styles in Flex 4.5.1?

    How to add a css to a view in the Controler?

    How do I fit a fieldset to the size of its content with CSS?

    how to create multiple instance of a css class?

    How to make padding:auto work in CSS?

    How to set CSS rule for a DIV in a LI of class UL?

    How to position
    element absolute from browser window?

    How to make 3-corner-rounded triangle in CSS

    How to make a button with image inside?