CSS drop down menu malfunctioning

Trying my hand at anchor tags and drop down menu. I'm encountering an issue in the code below - the dropdown doesn't seem to be working as intended. It should display the text "This is dropdown menu" directly beneath the text "This is text. Its in center" when the latter is hovered over. Both divs are of equal width.

html,body {
margin: 0px;
height: 100%;
/* [disabled]width: 100%; */
left: 0px;
top: 0px;
background-color: rgba(255,255,255,1);
}

.wrapper {
text-align: center;
margin-top: 0;
margin-left: auto;
height: 100%;
max-width: 960px;
background-color: rgba(0,0,0,1);
margin-right: auto;
position: relative;
}

.link1 {
height: auto;
width: 50%;
color: rgba(255,255,255,1);
margin-right: auto;
margin-left: auto;
background-color: rgba(204,204,204,1);
}

.link1 a {
text-decoration: none;
display: block;
}

.link1 a:hover {
text-decoration: underline;
background-color: rgba(255,0,0,1);
}

.link1 a:hover .dropdown {
display: block;
}


.dropdown

{
height: 25%;
width: 50%;
background-color: rgba(204,204,204,1);
margin-right: auto;
margin-left: auto;
text-align: center;
display: none;
}
<div class="wrapper">

<div class="link1">
<a href="http://www.hotmail.com">This is text. Its in center</a>
</div>
<div class="dropdown">This is dropdown menu</div>

</div>

htmlcss

Answer №1

The specified css selector .link1 a:hover .dropdown targets the element with the class dropdown, which must be nested inside an anchor element in a hovered state (a:hover), within an element with the class link1.

However, this selection does not align with your current html structure.

To resolve this issue, you can update your html as follows:

<div class="wrapper">
     <div class="link1">
          <a href="http://www.hotmail.com">
              This text is positioned centrally.
              <div class="dropdown">Dropdown content here</div>
          </a>
     </div>
</div>

I hope this solution proves beneficial.

Answer №2

Lexith makes a valid point - the dropdown should be added within the container div to select the sibling of the hovered a link.

Here is an example:

CSS -

.link1 a:hover + .dropdown {
    display: block;
}

HTML -

<div class="link1">
  <a href="http://www.hotmail.com">This text is centered</a>
  <div class="dropdown">Dropdown menu contents here</div>
</div>

CSS update - To keep the dropdown open when hovering over it:

.dropdown:hover,
.link1 a:hover + .dropdown {
    display: block;
}

This approach avoids applying any styling from the a tag. View my code pen

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

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

javascriptjqueryhtml

The Github page is continuously loading without displaying any content

Recently, I created a web-map application using the OpenLayers library and published it on Github Pages. You can access it through this link: . However, when I try to load the page, the content doesn't show up and it just keeps loading indefinitely. ...

htmlgithubopenlayersweb-hosting

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

javascripthtmlcssvue.jsvuetify.js

Tips for Deselecting a Table Cell in React

I've been working on a table in React and I'm trying to implement a feature where clicking on a cell colors it, and clicking on another cell uncolors the previous one. So far, I've managed to color cells upon clicking but I'm stuck on h ...

cssreactjshtml-tableonclick

How to create a custom button or menu design with ExtJS

My objective is to customize the appearance of an ExtJS button along with its menu. I am facing difficulty in applying styling to a button even with a CSS class. I have attempted the following code: CSS: .customStyle { font-size: 20px !important; ...

javascriptjqueryhtmlextjsweb

The Jquery script is ineffective for newly added elements

After creating an Ajax Form that functions well, I noticed that when the result of the form is another form, my script does not work for the new form generated. Is there a way to make the new form function like the old one? $(document).ready(function() ...

javascriptjqueryhtmlajaxforms

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

htmlcsshtml-table

Displaying a div on click using Jquery will only impact one div at a time

I am encountering an issue with my WordPress setup. Within my loop, I have a clickable link that toggles a div to show or hide content. However, since each item in the loop uses the same class, clicking on one link activates all of them simultaneously. &l ...

javascriptjqueryhtmlwordpress

`Make Bootstrap 5 Modal centered horizontally`

I'm facing an issue with my Vue application where the Bootstrap 5 modal is not horizontally centered on desktop. Below is the code snippet of my component: Modal.vue <template> <teleport to="#modal-container"> <div ...

htmlcsstwitter-bootstrapvue.jsbootstrap-modal

Is there a way to customize the cursor of the webkit resizer (pulltab)?

I'm having difficulty implementing a custom cursor on my webkit pulltab. While I am able to change other properties like background color, the CSS "cursor" property remains unchangeable: #sessionbuilder::-webkit-resizer { background: #000; cursor ...

htmlcsswebkit

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

javascriptjquerycss

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

javascriptjqueryhtmldomweb

Automatically insert content into a div following the execution of an AJAX delete function using jQuery

I've been working on a feature to display an auto-populated message in the results div when a user deletes the last item from their favorites list, indicating that it is empty. However, I've hit a roadblock and can't seem to make it work. H ...

javascriptjqueryhtmlajax

Using AngularJS ng-style to set dynamic background images for different variables

Excuse me if this is a basic question. I am working on designing a login page with a background image, while the other pages don't have this background. I tried using ng-style but couldn't get the style to update when navigating between pages. In ...

cssangularjs

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

javascripthtmlangularjs

Adding tags to a URL using jQuery without causing a page refresh

I am in the process of developing a "builder" page that allows users to choose an element from a dropdown menu and create a webpage. Since we don't have access to a database for this task, I want to save the elements in the URL so it can be shared via ...

jqueryhtmlfragment-identifier

Reposition the element at the bottom of its parent element

I am facing an issue with the HTML structure in my application: <div class="work-item"> <div class="image-container"> </div> <div class="text-container"> </div> </div ...

javascriptjqueryhtmlcss

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css

Is there a way to create a navigation menu that highlights as we scroll down the page?

Check out this example of what I am looking for. https://i.stack.imgur.com/fdzvZ.png If you scroll, you will notice that the left menu highlights. Sub-menus will extend when the corresponding menu is highlighted and collapse when other menus are highlig ...

javascripthtmlnavscrollspy

How to align radio_button_tag and label_tag side by side in Rails using Twitter Bootstrap 2?

Struggling to align the radio_button_tag horizontally with its label_tag. (Utilizing HAML) =radio_button_tag(:animal, "dog") =label_tag(:animal, "Dog") Which classes should I use for these form helpers to have them positioned side by side as shown below: ...

cssruby-on-railstwitter-bootstrap