Tips on displaying one <dl> when hovering over another <dl> element

After spending a solid 3 hours searching without success, I am feeling incredibly frustrated and in need of assistance.

Below is my HTML code:

<div class="dropdown-content">
        <dl class="subDL">
            <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mark Attendance &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="li-icon">&raquo;</span></a></dt>
                <dl class="subDL">
                    <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Arrival Time</a></dt>
                    <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Departing Time</a></dt>
                </dl>
            <hr size=1 width="98%" color= #003E6B />
            <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Summary</a></dt>
        </dl>
    </div>

CSS Styles

.dropdown-content a:hover,dt:hover {
    background-color: #fff;
    color:#004d85;
}

.move:hover .dropdown-content {
    display: block;
}
dt:nth-child(1):hover .li-icon{
    color: #0076bc;
    text-shadow: 0px 0px 1px #0076bc;
    font-size: 20px;
}
dl.subDL dt  > ul.subDL{
    display: none;
}
.dropdown-content dl > dt:hover > ul{
    display: block;
}
htmlcss

Answer №1

To start, reorganize your html code so that the submenu is contained within the parent dt:

<div class="dropdown-content">
    <dl class="subDL">
        <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mark Attendance &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="li-icon">&raquo;</span></a>
            <dl class="subDL">
                <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Arrival Time</a></dt>
                <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Departing Time</a></dt>
            </dl>
        </dt>
        <hr size=1 width="98%" color= #003E6B />
        <dt><a href="#">-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Summary</a></dt>
    </dl>
</div>

Next, update the css to target dl instead of ul (since no uls are being used):

.dropdown-content a:hover,dt:hover {
    background-color: #fff;
    color:#004d85;
}

.move:hover .dropdown-content {
    display: block;
}
dt:nth-child(1):hover .li-icon{
    color: #0076bc;
    text-shadow: 0px 0px 1px #0076bc;
    font-size: 20px;
}
dl.subDL dt > dl.subDL{
    display: none;
}
.dropdown-content dl > dt:hover > dl{
    display: block;
}

Check out this example on jsfiddle.

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

Why aren't the JavaScript stars shining once I've selected one?

I recently set up a star rating feature on my website by following the tutorial "Creating an Ajaxified Star Rating System in Rails 3". Although I managed to get everything working on the index page, I noticed that the stars do not remain lit up after bein ...

javascriptjquerycssruby-on-railsruby

The thickness of an SVG line increases as it is rotated

I am working with multiple straight lines and have specified the stroke-width as 4. However, when I attempt to rotate them, the lines appear thicker than expected. Additionally, setting a negative value, such as <path d="M0 -10 20 0" stroke-width="4" st ...

htmlcsssvg

Is there a print button in Drupal similar to a print link?

Is there a way in Drupal to create a button using an API function similar to the print link function? <?php print l(t('Announcement'), 'node/30'); ?> l turns text into a link. I'm looking for a way to create buttons in Drup ...

phpcssdrupalcontent-management-systemdrupal-theming

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

Automatically downloading files when displayed or viewed on a website

Is it possible for PDF or png/jpeg files viewed on a website to be automatically downloaded to my computer? If so, where would they be stored? I have tried searching on Google but have not found a helpful answer to my question. ...

c#html

Receiving array data in a Javascript function and storing it within a variable

Hello everyone, please take a look at my code below. I am attempting to pass PHP array values to a JavaScript function. When I run the script, I receive alerts for parameter0=1, parameter1=2, and parameter2=3 separately. What I am trying to achieve is to ...

phpjavascripthtmlarraysfunction

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

After the main page is loaded, the div will be dynamically populated with HTML content. How can we confirm that it has finished

I recently took over a project where a page loads and then code attached to that page populates a div with dynamically generated html – essentially filling an existing div with a string of html elements. Within this string are links to images, among oth ...

javascriptjqueryhtmlloading

Tips for customizing fonts in a WordPress object

WordPress is sending me an object that I need to work with. The main issue at hand: the font styles of WordPress posts in my app are all inconsistent. How can I go about styling these fonts uniformly? Take a look at this Plunkr if you'd like to expe ...

angularjscss

What are the best scenarios for using %, em, or ex units in CSS font styles?

I'm trying to figure out in what situations I should use %, em, and ex as font units of measurement in CSS. Can someone provide some clarity on this for me? I'm feeling a bit confused. ...

css

Positioning two images alongside text

I am trying to position two images at the top of my website so that they align correctly with the text next to them. However, I've encountered a few challenges: 1) The text doesn't have any spacing between the images. 2) The text varies in le ...

htmlcss

Issue with centering content on Bootstrap 4 cards in vertical position

I'm facing an issue with vertical alignment of content within a card. I've gone through various resources in Bootstrap 4 for guidance, including: Below is the code I've been working with: <div class="col-sm-12 col-md-4"> <div ...

htmlcssbootstrap-4panel

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

htmlcss

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

javascripthtmlajax

Ways to align an element within its parent element without relying on absolute positioning

I'm in the process of creating a basic header for my website, and I'm looking to place my back button inside a div container with it floating to the left. However, I also want the "Header" text to be centered within the parent div. I initially ...

htmlcssbootstrap-4

Using HTML code to incorporate one HTML file into another's structure

As a skilled programmer, I understand the importance of code reusability. Despite being new to HTML and CSS programming, I often find myself writing repetitive code in one HTML file. Is there a way to avoid this redundancy? Can functions be utilized in H ...

html

Utilize regular expressions to substitute content with HTML tags within a directive

While working with Angular JS to iterate through Twitter tweets using ng-repeat, I encountered the need to highlight certain parts of the tweet string such as @tag and #hash. To achieve this, it was suggested to utilize replace method to wrap these element ...

javascripthtmlangularjsregex

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

The navigation bar in responsive view on Bootstrap 4 causes the content below it to shift

Recently I have been exploring bootstrap-4 and encountered an issue while creating a nav-bar. The problem is that in responsive view, when toggling the nav-bar it simply pushes the content below it. Is there any way to address this issue within (bootstra ...

htmlcss

Plugin for turning text into "leet speak" using jQuery and Javascript

Recently, I've been on the hunt for a 1337 translator that I can seamlessly integrate into a jQuery plugin. While I believe I'm making progress, I can't shake off the feeling that something's amiss. My gut tells me that what I currently ...

javascriptjqueryhtmljquery-plugins