Revealing the subelement upon hovering

Consider the given 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>

The expected behavior was for the ul elements to be visible like a dropdown menu, but they remain hidden. What could be causing this issue?

htmlcss

Answer №1

The reason for the issue is that "inline CSS" has a lower priority in the cascade, causing your display:block rule to be overridden.

To fix this, you should remove the style="display:none;" attribute from the HTML and instead set it as the default style in the CSS for the ul.

.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>

Answer №2

It seems that the issue lies in using inline styles like display:none;, which takes precedence over CSS rules. By removing those and incorporating 

.hormenuParent ul {display: none;}
into your CSS, the lists now reappear upon hover. All that's left is to enhance the visual styling!

Check out the revised code below:

<!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 Document 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>

Answer №3

Learn how to create a CSS menu that appears on mouseover with this simple code:

.hormenuParent {
  position:relative;
}
.hormenuParent:hover ul {
  display:block !important;
}

.hormenuParent ul {
  margin-top:0;
  left:0;
  width:200px;
  position: absolute;
  background:#f0f0f0;
}

Try it out yourself: https://jsfiddle.net/7mLkdh5u/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure that the HTML5 application is fixed inlandscape mode

I'm in the process of developing a basic HTML5/CSS3/Javascript application that needs to be compatible with all major mobile platforms - android, ios, and windows-phone. My goal is to have the app only function in landscape mode, even if the user hold ...

androidioshtmlwindows-phone-8

Switching FontAwesome Stacks on Hover

I'm facing a challenge with creating a quick animation that replaces an entire span on hover. How can I successfully approach replacing a span on hover? <h1>I am looking to have this element replaced...</h1> <span class="fa-stack fa-lg ...

htmlcssfont-awesome

Can you provide me with ideas on how to create a unique border design for a div box? Thank you!

The challenge lies in the fact that the dimensions and position of the div box will be dynamically changing through JavaScript, while also requiring the box to remain completely transparent. Refer to the image for a visual understanding of what I'm t ...

javascriptcss

Efficiently storing and quickly retrieving data from a table for seamless echoing

Details I have created a table using ul and li. Here is the link to view the table: http://jsfiddle.net/8j2qe/1/ Issue Now, how can I efficiently store and display data like the one shown in the image? Each column should only contain one entry. Your r ...

phphtmlmysql

What is the best way to create a centered vertical line with text in the middle?

I attempted to replicate a form that contains a vertical line <span class="vertical-line">or</span> with text centered in it! How can I create a similar appearance like this form? I considered using hr but it generates a horizontal ...

htmlcss

What is the best way to incorporate /sfPropelORMPlugin/css/global.css and /default.css in a Symfony project?

I recently acquired the sfPropelORMPlugin plugin, however I am unsure of how to integrate it into my symfony project. Upon reviewing the source code of the page, I only found: <link rel="stylesheet" type="text/css" media="screen" href="/css/main.css" ...

csspluginssymfony-1.4

Sending iOS nowPlayingInfo data to web service

I am looking to create a solution for retrieving the currently active audio track on an iOS device and transmitting that data to a remote web service. Is there a way to achieve this using HTML 5 code that is compatible with Safari, or are dedicated apps d ...

iosswifthtml

Tips for showcasing array values on an HTML webpage

Having trouble displaying the "latitude" and "longitude" in html. I attempted to use a forEach loop, but it was not successful https://i.sstatic.net/FnLMP.png this.otherService.getList().subscribe( (response: any) => { this.atm = response; H ...

htmlangularangular8

Display div content depending on the clicked ID in AngularJS

Unique Header Links HTML <ul ng-controller="pageRouteCtrl"> <li ui-sref-active="active"> <a ui-sref="home" class="" ng-click="getPageId('live-view')">LIVE</a> </li> <li> <a ng-clic ...

javascripthtmlangularjsng-show

Blurring a section of a circular image using a combination of CSS and JavaScript

I'm trying to achieve a specific effect with my circular image and overlaying div. I want the overlaying div to only partially shade out the image based on a certain degree value. For example, if I specify 100 degrees, I only want 260 degrees of the c ...

javascriptjqueryhtmlcss

Conceal the initial element featuring an image

Given that the post-body includes various elements, such as links and divs, I am interested in concealing only the first child element that contains an image. <div class="post-body"> <div class="separator"><img/></div> </div&g ...

jqueryhtmlimagehide

Solution for fixing the position of a div scrollbar under the browser scrollbar

When working on my web app, I faced an issue with a fixed div modal that takes up the entire screen. The problem is that the scrollbar for this modal is not visible, only the body scrollbar can be seen. It seems like the fixed div's scrollbar is posit ...

htmlcss

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

I have been utilizing a similar solution found at http://jsfiddle.net/cSSUA/209/ to add tooltips to disabled buttons. However, I am encountering an issue specifically in Internet Explorer (IE11). The workaround involves wrapping the button within a span: ...

javascriptjqueryhtmlcss

Can CSS namespace attribute selectors be used with XHTML/HTML elements?

I am trying to customize elements that have the xlink:href attribute in XHTML, but I am facing some difficulties with it. Here is the code I tested: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/19 ...

htmlcssxhtmlcss-selectorsxml-namespaces

Update your ASP.NET application to replace checkboxes with images

I have attempted the following methods, and I believe the question is pretty clear. Attempted Solution Using CSS: (Unfortunately, this approach did not work as expected and I had to resort to using a jsfiddle) .star + label{ background:url('imag ...

jquerycssasp.net

Choose does not showcase the updated value

My form contains a form control for currency selection Each currency object has the properties {id: string; symbol: string}; Upon initialization, the currency select component loops through an array of currencies; After meeting a specific condition, I need ...

htmlangulartypescriptforms

In the HTML body, create some breathing room on the side

While working on a virtual restaurant menu with bootstrap, I encountered an issue where there was a persistent little space at the right side of my page that remained unfilled. Despite trying various solutions and inspecting elements, I couldn't ident ...

htmlbootstrap-5

Prevent css from reverting to its original rotation position

I attempted to style the navigation list with the following CSS: #navlist:hover #left-arrow { border-top: 10px solid white; position: relative; transform: translateX(120.2px) rotate(180deg); } Would it be better to use jQuery for the rotation ...

jqueryhtmlcss

Android: A comprehensive look at how Universal Image Loader addresses blank space problems

Currently, I am dealing with a string that includes HTML content like text and images. To properly display the <img> tags in a TextView, I have opted for the Android Universal Image Loader (UIL). Each image should ideally appear in its original posit ...

javaandroidhtmluniversal-image-loader

What is the best way to delete the onclick event of an anchor element?

Struggling to remove the onclick attribute using jQuery? Here's my code: function getBusinesses(page){ if(page==0){ alert("you are already on First Page"); $("#previous a").removeAttr("onclick ...

javascriptjqueryhtml