What could be causing my CSS to behave unexpectedly?

Here is my css code that makes a dropdown menu visible:

a.menu:hover {
opacity: 1;
text-shadow: 0 0 10px white;
}
a.menu:hover ~ .dropdown {
display: block;
}

.dropdown {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 120px;
left: 120px;
background: red;
}

This is the corresponding HTML:

<p class="left_topbar">
    <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a>
        <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a>
</p>

<div class="dropdown"></div>

I'm trying to figure out why the .dropdown element becomes visible when hovering over the menu link. Any ideas?

htmlcsshover

Answer №1

It appears that your h2 element is not a direct child of the h1 tag. To target this structure, you need to use the sibling operator(+).

  h1:hover + h2{
     display: block;
  }

If you want to select all elements instead of just the immediate sibling, utilize the ~ operator.

  h1:hover ~ h2{
     display: block;
  }

UPDATE:

Based on your recent changes, it seems like you need to adjust the order as shown below.

 a.menu:hover {
  opacity: 1;
  text-shadow: 0 0 10px white;
 }
 .dropdown {
   display: none;
   width: 50px;
   height: 50px;
   position: absolute;
   top: 120px;
   left: 120px;
   background: red;
  }
 a.menu:hover ~ .dropdown {
   display: block;
 }

HTML

 <div class="left_topbar">
      <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a>
      <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a>
      <div class="dropdown"></div>
 </div>

Answer №2

If you're looking to make a modification, consider switching 

>

with

+

This adjustment is necessary because the arrow functions as a descendant selector while the plus sign operates as a sibling selector.

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

What is the best way to implement a CSS transition for styles that are dynamically created by React?

I have a situation where I am using a button component that is styled based on a theme provided by a context: The code in Button.js looks like: () => { const theme = useContext(themeContext); // { primaryColor: "blue" } return <button className ...

javascriptcssreactjscss-transitions

What is the process for ensuring that an image is set as the submit button in an HTML form on IE 7?

My HTML form is designed with an action on a PHP script, and the submit button displays a custom image instead of the default grey. While this code works perfectly in Chrome, it fails to function properly in Internet Explorer 7. Do you have any suggestions ...

phphtmlimagebuttonsubmit

Tips for applying a CSS class with a smooth fade-out effect

In my Angular project, I am working on creating a custom notification component. Here is the template code I have so far: <aside *ngFor="let message of messages "> <div class="notification" style="position:fixed"> {{message.conten ...

htmlcss

struggling to align items within a flexbox container

I am facing issues with setting the justify property for items inside my flexbox. Even though I am setting this property in the container class, it does not seem to have any effect. I am unable to understand what is causing this, any help would be appreci ...

htmlcssflexbox

Simple Easyui design featuring collapsible regions

I'm currently working on a frontend application and I've decided to utilize the Easyui library to help with managing the page layout. One particular section of code is causing me some trouble: <div id="stgis-app" class="stgis stgis-content e ...

javascriptjquerycssjquery-easyui

Angular navigation is inconsistent in its functionality

Currently, my Angular project consists of four components: home, portfolio, contact, and about. While I can navigate from the home page to any other component using the nav-bar, I am restricted to navigating only back to the home page when on any other pag ...

javascripthtmlcssangulartypescript

Whenever I create a new JavaScript application, the CSS files do not seem to reflect the most recent changes

My Next.js App is running smoothly on my client when I do npm run build and test it with node server js. However, the issue arises when I move the app to a production server. After executing npm run build on the server, everything seems to work fine except ...

cssnode.jsnext.js

Place the two buttons in position

I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. ...

htmlcss

When dealing with errors in multiline textarea content, an error may occur with the error handling

Currently, I have created an HTML/PHP form with a 'textarea' element. As I work on implementing error handling, I want to ensure that if a mistake is made in the form, the content entered by the user is retained. Specifically, when a user makes ...

phphtmlformserror-handlingtextarea

table with flexible cell width and fixed table width

I've been troubleshooting this issue for days, but I just can't seem to find a solution! The problem lies within a table used on a webpage. If I don't specify table-layout, I can make one cell width dynamic, but I lose the ability to set &a ...

htmlcss

Tips for choosing a value from a hover dropdown with Selenium Ruby Capybara

Is there a way to choose an option from a hover dropdown menu in selenium ruby capybara? I attempted the following code, however it was unsuccessful: page.driver.action.move_to('variable').perform ...

rubyseleniumdrop-down-menuhover

Embedding a table row within an anchor element in Angular 4

Currently, I am facing an issue with a table that contains [routerLink] on each <tr>. This setup is preventing the "open link in a new tab" option from appearing when I right-click because there is no <a> tag. I attempted to enclose the table r ...

htmlcssangular

What is preventing the unordered list from aligning to the right of the h1 element?

The following HTML code showcases the structure of a front-end web developer's webpage: <html> <head> <title>Front-end Web Developer</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head& ...

htmlcsscss-float

What is the best way to insert a Bootstrap Glyphicon into an asp:TextBox within ASP.Net Webforms?

Can a Glyphicon be displayed in an <asp:TextBox> control? I attempted the following: <div class="col-md-10 has-feedback"> <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control" MaxLength="50" /> <i class="glyph ...

htmlasp.nettwitter-bootstraptwitter-bootstrap-3webforms

Arranging content in a horizontal row using div elements

My webpage features two div elements. One of the div represents header content, while the other div displays details content. I want both sets of content to be aligned side by side. Specifically, I need the details content to always appear on the right-han ...

htmlcss

Smoothness issue with fading in Ajax-loaded div using jQuery

When I run the code locally, the fade-in effect is very smooth. However, when it's deployed on a remote server, the content loaded into the target div initially appears, then disappears instantly before fading back in again. What could be causing thi ...

javascriptjqueryhtml

Issue with Angular: boolean value remains unchanged

Currently, I'm encountering an issue with my application. My objective is to establish a list containing checkboxes that toggle their values between true and false when clicked. Sounds simple enough, right? Below is the HTML code snippet: <l ...

javascripthtmlangulartypescript

Ways to utilize the ::after pseudo class with ElementRef within Angular

Is it possible to manipulate the background-color of the ::after pseudo selector for the specified element using Angular? @ViewChild('infobubble', { read: ElementRef }) infoBubbleElement: ElementRef; ngAfterViewInit(): void { const el ...

cssangularcss-selectors

Creating unique CSS classes for custom forms in Web2py

What is the best way to assign a custom web2py form's class? for example: {{=form.custom.begin}} Image name: <div>{{=form.custom.widget.name}}</div> Image file: <div>{{=form.custom.widget.file}}</div> Click here to upload: {{= ...

pythoncssweb2py

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

javascriptphphtmlajaxpost