Hovering over a link causes malfunction in CSS drop-down menu

I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown to appear when you hover over .droptoggle. I'm including the entire page because I can't figure out what's wrong, and being new to HTML and CSS, it's probably something small and simple that I'm overlooking. Thank you in advance for any assistance!

HTML:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #36363c;
}

.tbback {
  height: 65px;
  width: 100%;
  background: #2d2d33;
}

.navtext li {
  display: inline;
  padding: 25px;
}

// More CSS code...

.droptoggle:hover + .dropdown {
  display: block;
}
<?

    // PHP code omitted for brevity

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    // More HTML code...
</head>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
    // Tawk.to script...
</script>
<!--End of Tawk.to Script-->
<body>

<!---NAVBAR--->
    <? if(isset($_SESSION['steamid'])) {?>
<div class="tbback">
    <div class="proppos">
        <ul class="userprop">
            // More HTML code...
        </ul>
    </div>
    // More HTML code...
</div>
<div class="dropdown">
    <ul>
        // More HTML code...
    </ul>
</div>
    <!---DEPO--->
    <!---CHAT--->
 <div class="chatback">
    <div class="chatscroll">
        <div class="chatobject">
        </div>
    </div>
</div>
<? } else {?>

<? } ?>
</body>
</html>

Answer №1

You have utilized the CSS selector shown below:

.droptoggle:hover + .dropdown

This specific selector targets any element with the class .dropdown that immediately follows an element with the class .droptoggle on the same hierarchical level.

However, it appears that your .dropdown list element is not placed at the same level:

<div class="tbback">
    <a href="#" class="droptoggle">(...)</a>
    (...)
</div>
<div class="dropdown">
    <ul>
        (...)
    </ul>
</div>

One of the potential solutions could be to relocate your .dropdown div element within the .tbback element right after the .navtext ul element and adjust your CSS selector as follows:

.droptoggle:hover + .navtext + .dropdown

Answer №2

Rearrange your elements by moving the .dropdown element right after the .droptoggle:

<div class="tbback">
    <div class="proppos">
        <ul class="userprop">
            <li><a href="#"><i class="fas fa-wallet"></i>DEPOSIT</a></li>
            <li><a href="#"><i class="fas fa-suitcase"></i>INVENTORY</a></li>
        </ul>
    </div>
    <ul class="navtext">
        <li><a href="#"><i class="fas fa-sync-alt"></i>TRADE</a></li>
        <li><a href="#"><i class="fas fa-shopping-cart"></i>SHOP</a></li>
        <li><a href="/pages/premium.html" style="color: #ffe063;"><i class="fas fa-crown"></i>PREMIUM</a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>GIVEAWAYS</a></li>
    </ul>
    <a href="#" class="droptoggle"><img class="imground" src="<?=$steamprofile['avatarmedium'];?>"><i class="fas fa-caret-down"></i></a>
    <div class="dropdown">
        <ul>
            <li><a href="#" style="color: #ff5448;"><i class="fas fa-user"></i><?=$steamprofile['personaname'];?></a></li>
            <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>Rewards</a></li>
            <li><a href="#"><i class="fas fa-book"></i>Blog</a></li>
            <li><a href="#"><i class="fas fa-question-circle"></i>Support</a></li>
            <li><a href="#"><i class="fas fa-info-circle"></i>Info</a></li>
            <li><a href="steamauth/logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a></li>
        </ul>
    </div>
</div>

Then, apply this CSS to adjust the positioning:

.droptoggle {
/*
  float: right;
  display: flex;
*/
  padding-top: 13px;
  padding-right: 15px;
  position: absolute;
  top: 0;
  right: 0;
}

.dropdown:hover,
.droptoggle:hover + .dropdown {
  display: block;
}

Answer №3

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #36363c;
}

.tbback {
  height: 65px;
  width: 100%;
  background: #2d2d33;
}

.navtext li {
  display: inline;
  padding: 25px;
}

.navtext a {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
  transition: all 0.2s linear;
}

.navtext a:hover {
  color: #712889;
}

.navtext {
  text-align: center;
  padding-right: 10px;
  padding-top: 21px;
  width: 100%;
  position: relative;
}

.navtext i {
  padding-right: 5px;
}

.openapi {
  float: right;
  position: relative;
  z-index: 10;
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
  padding-right: 10px;
  padding-top: 21px;
  transition: all 0.2s linear;
}

.openapi i {
  padding-right: 5px;
}

.openapi:hover {
  color: #30ee46;
}

.chatback {
  height: calc(100vh - 65px);
  width: 300px;
  background: #2d2d33;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
  float: left;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #44444b;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #494950;
}

.chatobject {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Source Code Pro", monospace;
  font-size: small;
  padding: 15px;
}

.droptoggle {
  float: right;
  display: flex;
  padding-top: 13px;
  padding-right: 15px;
}

.imground {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 3px solid #ff54489c;
  z-index: 15;
}

.fas.fa-caret-down {
  color: white;
  text-decoration: none;
  padding-top: 13px;
  float: right;
  padding-left: 10px;
  z-index: 20;
}

.profilename {
  text-decoration: none;
  color: #cfcfcf;
  font-family: "Teko", sans-serif;
  font-size: large;
}

.userprop {
  padding-top: 23px;
  position: absolute;
  z-index: 11;
}

.userprop li {
  display: inline;
  padding-right: 10px;
}

.userprop i {
  padding-right: 4px;
}

.userprop a {
  text-decoration: none;
  color: #a8a8a8;
  font-family: "Teko", sans-serif;
  font-size: medium;
  transition: all 0.2s linear;
}

.proppos {
  float: right;
  padding-right: 250px;
}

.userprop a:hover {
  color: #ff5448;
}

.dropdown {
  
  margin-top: 5px;
  background: #2d2d33;
  padding-left: 10px;
  padding-right: 80px;
  border-radius: 5px;
  margin-right: 5px;
  margin-left:20px;
  padding-bottom: 20px;
  display: none;
  position: relative;
  z-index: 1;
}

.dropdown li {
  list-style-type: none;
  padding-top: 20px;
}

.dropdown a {
  text-decoration: none;
  color: #fff;
  font-family: "Cairo", sans-serif;
  font-size: 13px;
}

.dropdown i {
  padding-right: 10px;
  font-size: 15px;
}

.testing:hover > .dropdown {
  display: block;
  
}
.testing{
  float: right;
}
<div class="tbback">
    <div class="proppos">
        <ul class="userprop">
            <li><a href="#"><i class="fas fa-wallet"></i>DEPOSIT</a></li>
            <li><a href="#"><i class="fas fa-suitcase"></i>INVENTORY</a></li>
        </ul>
    </div>
  <div class="testing">
    <a href="#" class="droptoggle"><img class="imground" src="<?=$steamprofile['avatarmedium'];?>"><i class="fas fa-caret-down"></i></a>
  <div class="dropdown">
    <ul>
        <li><a href="#" style="color: #ff5448;"><i class="fas fa-user"></i><?=$steamprofile['personaname'];?></a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>Rewards</a></li>
        <li><a href="#"><i class="fas fa-book"></i>Blog</a></li>
        <li><a href="#"><i class="fas fa-question-circle"></i>Support</a></li>
        <li><a href="#"><i class="fas fa-info-circle"></i>Info</a></li>
        <li><a href="steamauth/logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a></li>
    </ul>
</div>
    </div>
    
    <ul class="navtext">
        <li><a href="#"><i class="fas fa-sync-alt"></i>SWAP</a></li>
        <li><a href="#"><i class="fas fa-shopping-cart"></i>STORE</a></li>
        <li><a href="/pages/premium.html" style="color: #ffe063;"><i class="fas fa-crown"></i>PREMIUM</a></li>
        <li><a href="#" style="color: #30ee46;"><i class="fas fa-gift"></i>GIVEAWAYS</a></li>
    </ul>
</div>

    <!---DEPOSIT--->
    <!---CHAT--->
 <div class="chatback">
    <div class="chatscroll">
        <div class="chatobject">
        </div>
    </div>
</div>

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

Understanding how to access and interpret comments within the HTML DOM body using Selenium操作

I am attempting to extract the following comment from the body of an HTML DOM using Selenium: <html> <head class=.....> <body> <script>...</script> <!-- Campaign Name: POC_SITE_MONETIZATION_DEALS_QA Experience Name: SMBelo ...

I am looking to reposition the navbar span tag so that it appears beneath the icon, utilizing both HTML and CSS

I'm currently working on a navbar design with 5 items, each containing an icon and a span tag. However, I'm facing difficulties in aligning the span tag below the icon for all 5 items in the navbar. Despite my best efforts, I have been unable to ...

Embed a video within an image while ensuring it remains responsive on all devices

I have a picture that resembles something like this one My goal is to embed a video into it while maintaining its aspect ratio when the screen size is reduced. The responsive design should only affect the width since the image will be displayed in portrai ...

Display live data directly from a specific XML tag on a webpage

My project involves working with a local XML file that is being constantly updated by a third party. I am looking to create a web page that can dynamically read and display a specific XML tag without requiring the page to be refreshed. Additionally, I woul ...

align the text below a single element

Whenever I attempt to designate the character c as sub-aligned within a table row, the subsequent bar text also becomes sub-aligned (which is very counterintuitive). <table> <tr> <td>test</td> <td>foo<sel style= ...

How can jQuery be utilized to enlarge specific <li> elements that are aligned with the right side of the page?

I'm encountering issues with expanding list elements using jQuery. The lists consist of social media icon links that I would like to enlarge upon mouseover. The problem arises when enlarging the width of the li element, causing the ul to also expand. ...

Steps for Embedding an HTML Page into a Tab using jQuery

Within the tab labeled class=plots-tabs-heatmap, I am attempting to insert a new page using the code below. However, instead of seeing tmpdata/page2.html displayed on the tab, nothing appears. $('#plots-tabs-heatmap').html("tmpdata/page2.html"); ...

Add custom CSS styles to a webpage using the CSS Style element retrieved from

I am working on an HTML page that has a TextArea and label. My goal is to create CSS classes in the TextArea and apply them to the label: <textarea id="txtCSS" name="txtCSS" rows="4" cols="50"> .FC{color:gr ...

showing a message in a pop-up alert box

$(document).ready(function(){ $(document).on('click', '#btnSave', function () { var fname = $("#fname").val(); var lname = $("#lname").val(); var email = $("#email").val(); var mobile = $("#mobile").val(); if(fname == ""){ alert(&apos ...

The text/font-weight of the header button is mysteriously shifting without warning

While creating a header for my webpage, I encountered an issue where the text family was changing when the dropdown menu was launched in Safari 8. Curiously, this behavior did not occur when using Chrome to launch the jQuery function. Even after attempting ...

Tips for capturing and storing video with HTML5 WebRTC

Before reading the description, make sure to run the code snippet first. This will provide you with a better understanding of the structure. In the 2nd video element, I am trying to record, play, and save video. The issue I'm encountering is that the ...

Experiencing issues with exporting <SVG> file due to corruption

I received some downvotes on my previous post, and I'm not sure why. My question was clear, and I provided a lot of information. Let's give it another shot. My issue is with exporting <SVG> files from an HTML document. When I try to open t ...

Issue with .html causing .hover to malfunction

Attempting a basic image rollover using jQuery, I've encountered an issue with the code below: HTML: <div class="secondcircle" id="circleone"> <p> <img src="/../ex/img/group1.png"> </p> </div> JS: $("# ...

Enroll a nearby variable "Data" to an Observable belonging to a different Component within an Angular application

Looking to update the HTML view using *ngIf, depending on a local variable that should change based on an observable variable from a shared service. HTML <div class="login-container" *ngIf="!isAuthenticated"> TypeScript code for the same componen ...

Adding a data attribute to a Material-UI Button: A step-by-step guide

I'm trying to include a custom data attribute in the Material-UI Button Component as shown here. Here's what I attempted: <Button inputProps={{ 'data-testid'='clickButton' }} > Click </Button However, this approach ...

Input fields are not being displayed in the Django form

I've been struggling with resolving this issue using chat GPT for quite some time now. It keeps indicating that everything is fine, but it's clearly not working as expected. At the moment, I am focusing on fixing the email field first before proc ...

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

Is there a way to access just the concealed text within an element?

Is there a way to create a JavaScript function that can specifically extract hidden text from an element? Are there any existing libraries with this capability, and if so, how efficient are they? In order for an element to be considered visible ac ...

Unexpected data being passed in knockout click event binding

for (let i = 0; i < 9; i++) { vm.icdCodes.push({Index:i, ID:'',DiagnosisCd: '' ,Description:ko.observable('')}); } <tbody data-bind='foreach: $root.icdCodes'> <tr> <td> ...

Loads a PHP file automatically using the URL from a jQuery Ajax method

Using the jquery ajax method, I am trying to populate a dropdown menu with a set of option values from my title.php file. However, upon loading the page, in the Chrome Android browser, it redirects to the title.php. Does anyone have any insights into what ...