Displaying the subelement on hover

Given the following HTML code:

.hormenu {
  text-decoration: none;
  color: black;
  padding: 0px 10px;
}

.hormenuParent {
  display: inline;
}

.hormenuParent:hover {
  background: #91c1f7;
}

.hormenuParent:hover ul {
  display: block;
}
<body style="height:100%;">
  <nav style="background-color:#f2f2f2; padding:4px 10px;">
    <div class="hormenuParent">
      <a href="#" class="hormenu">File</a>
      <ul style="display:none;">
        <li>Open</li>
        <li>Save</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Edit</a>
      <ul style="display:none;">
        <li>Copy</li>
        <li>Undo</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">View</a>
      <ul style="display:none;">
        <li>Zoom In</li>
        <li>Zoom Out</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Tools</a>
      <ul style="display:none;">
        <li>Do X</li>
        <li>Do Y</li>
      </ul>
    </div>
    <div class="hormenuParent">
      <a href="#" class="hormenu">Help</a>
      <ul style="display:none;">
        <li>About</li>
      </ul>
    </div>
  </nav>
</body>

I was expecting the ul elements to become visible (like a drop down menu), but they don't. Why?

3 answers

  • answered 2019-10-15 16:07 Paulie_D

    Because "inline CSS" comes last in the cascade and so your display:block is overridden.

    Remove style="display:none;" from the HTML and add it as the default syle to the ul css.

    .hormenu {
      text-decoration: none;
      color: black;
      padding: 0px 10px;
    }
    
    .hormenuParent {
      display: inline;
    }
    
    ul {
      display: none;
    }
    
    .hormenuParent:hover {
      background: #91c1f7;
    }
    
    .hormenuParent:hover ul {
      display: block;
    }
    <nav style="background-color:#f2f2f2; padding:4px 10px;">
      <div class="hormenuParent">
        <a href="#" class="hormenu">File</a>
        <ul>
          <li>Open</li>
          <li>Save</li>
        </ul>
      </div>
      <div class="hormenuParent">
        <a href="#" class="hormenu">Edit</a>
        <ul>
          <li>Copy</li>
          <li>Undo</li>
        </ul>
      </div>
      <div class="hormenuParent">
        <a href="#" class="hormenu">View</a>
        <ul>
          <li>Zoom In</li>
          <li>Zoom Out</li>
        </ul>
      </div>
      <div class="hormenuParent">
        <a href="#" class="hormenu">Tools</a>
        <ul>
          <li>Do X</li>
          <li>Do Y</li>
        </ul>
      </div>
      <div class="hormenuParent">
        <a href="#" class="hormenu">Help</a>
        <ul>
          <li>About</li>
        </ul>
      </div>
    </nav>

  • answered 2019-10-15 16:16 jjsecord

    It is because you are using in-line styles for display:none;. This will override anything you put in your CSS. Upon removing those and adding .hormenuParent ul {display: none;} to your CSS, the lists do reappear on hover. Now you just have to make it pretty!

    Here is the adjusted code:

    <!DOCTYPE html>
    <html>
    
    <head lang="en">
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>PTFS Dodument Editor</title>
      <style>
        .hormenu {
          text-decoration: none;
          color: black;
          padding: 0px 10px;
        }
        
        .hormenuParent {
          display: inline;
        }
        
        .hormenuParent ul {
          display: none;
        }
        
        .hormenuParent:hover {
          background: #91c1f7;
        }
        
        .hormenuParent:hover ul {
          display: block;
        }
      </style>
    </head>
    
    <body style="height:100%;">
      <nav style="background-color:#f2f2f2; padding:4px 10px;">
        <div class="hormenuParent">
          <a href="#" class="hormenu">File</a>
          <ul>
            <li>Open</li>
            <li>Save</li>
          </ul>
        </div>
        <div class="hormenuParent">
          <a href="#" class="hormenu">Edit</a>
          <ul>
            <li>Copy</li>
            <li>Undo</li>
          </ul>
        </div>
        <div class="hormenuParent">
          <a href="#" class="hormenu">View</a>
          <ul>
            <li>Zoom In</li>
            <li>Zoom Out</li>
          </ul>
        </div>
        <div class="hormenuParent">
          <a href="#" class="hormenu">Tools</a>
          <ul>
            <li>Do X</li>
            <li>Do Y</li>
          </ul>
        </div>
        <div class="hormenuParent">
          <a href="#" class="hormenu">Help</a>
          <ul>
            <li>About</li>
          </ul>
        </div>
      </nav>
    </body>
    
    </html>

  • answered 2019-10-15 16:19 Moïze

    Here is a simple CSS that will allow you to display your menu on mouseover:

    .hormenuParent {
      position:relative;
    }
    .hormenuParent:hover ul {
      display:block !important;
    }
    
    .hormenuParent ul {
      margin-top:0;
      left:0;
      width:200px;
      position: absolute;
      background:#f0f0f0;
    }
    

    You can test it here: https://jsfiddle.net/7mLkdh5u/1/