What could be causing my navigation bar to malfunction?

Being fairly new to HTML and CSS, I have been struggling with my nav bar. Despite multiple attempts to fix it, the dropdown items do not appear when hovered over. Changing display: none; to display:block; only results in the items dropping down to the next line instead of appearing underneath the item. Any constructive criticism would be greatly appreciated so that I can learn and improve. Thank you in advance!

    html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #0E0B16;
    }
    
    #wrap {
        height: auto;
        width: 100%;
        border-bottom-style: solid;
        border-bottom-color: #E7DFDD;
        border-bottom-width: thin;
    }
    
    ul {
        padding: 0;
        margin: 0;
        text-align: justify;
        background: #0E0B16;  
    }
    
    li {
        list-style: none;
        display: inline-block;    
        text-align: left;
    }
    
    a {
        color: #E7DFDD;
        text-decoration: none;
        display: block;
        margin-left: -4px;
        padding: 16px 25px;
        font-family: Verdana;
        font-weight: bold;
        border-right-style: solid;
        border-right-color: #E7DFDD;
        border-right-width: thin;
    }
    
    a:hover {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    a:active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .dropdown-content {
        display: none;
    }
    
    .dropdown:hover .dropdown-content{
        display: block;
    }
        <!DOCTYPE html>
    <html>
    <head>
        <title>Witcher's World</title>
        <link rel="stylesheet" href="witcher.style.css"/>
        <meta charset="UTF-8">
        
        <header>
            <nav id="wrap">
                <ul>
                    <li><a  class ="active" href="witcher.index.html">Home</a></li>
                    <li><a href="#">Witcher Lore</a></li>
                    <li><a class="dropdown" href="#">Glossary</a></li> 
                        <ul class="dropdown-content">
                            <li><a href="#">Characters</a></li>
                            <li><a href="#">Bestiary</a></li>
                        </ul>
                    <li><a class="dropdown" href="#">Weapons</a></li>
                        <ul class="dropdown-content">
                            <li><a href="#">Swords</a></li>
                                <!--<ul class="dropdown-content">
                                    <li><a href="#">Steel Swords</a></li>
                                    <li><a href="#">Silver Swords</a></li>
                                </ul-->
                            <li><a href="#">Signs</a></li>
                        </ul>
                    <li><a href="#">Books</a></li>
                </ul>
            </nav>
        </header>
    <body>
        
        <footer>
            
        </footer>
    </body>
    </html>

htmlcsshoveruinavigationbarnav

Answer №1

Your dropdown section doesn't encompass dropdown-content, and you must apply position:absolute to your dropdown-content.

    html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #0E0B16;
    }
    
    #wrap {
        height: auto;
        width: 100%;
        border-bottom-style: solid;
        border-bottom-color: #E7DFDD;
        border-bottom-width: thin;
    }
    
    ul {
        padding: 0;
        margin: 0;
        text-align: justify;
        background: #0E0B16;  
    }
    
    li {
        list-style: none;
        display: inline-block;    
        text-align: left;
    }
    
    a {
        color: #E7DFDD;
        text-decoration: none;
        display: block;
        margin-left: -4px;
        padding: 16px 25px;
        font-family: Verdana;
        font-weight: bold;
        border-right-style: solid;
        border-right-color: #E7DFDD;
        border-right-width: thin;
    }
    
    a:hover {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    a:active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .dropdown-content {
        display: none;
    }
    
    .dropdown:hover .dropdown-content{
        display: block;
        position: absolute;
    }
        <!DOCTYPE html>
    <html>
    <head>
        <title>Fantasy World</title>
        <link rel="stylesheet" href="style.css"/>
        <meta charset="UTF-8">
        
        
    </head>
    <body>
        <header>
            <nav id="wrap">
                <ul>
                    <li><a  class ="active" href="index.html">Home</a></li>
                    <li><a href="#">Fantasy Lore</a></li>
                    <li class="dropdown"><a  href="#">Dictionary</a> 
                        <ul class="dropdown-content">
                            <li><a href="#">Characters</a></li>
                            <li><a href="#">Creatures</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a  href="#">Artifacts</a>
                        <ul class="dropdown-content">
                            <li><a href="#">Weapons</a></li>
                                <!--<ul class="dropdown-content">
                                    <li><a href="#">Swords</a></li>
                                    <li><a href="#">Staffs</a></li>
                                </ul-->
                            <li><a href="#">Runes</a></li>
                        </ul>
                      </li>
                    <li><a href="#">Books</a></li>
                </ul>
            </nav>
        </header>
        <footer>
            
        </footer>
    </body>
    </html>

Answer №2

.dropdown:hover .dropdown-content
will not trigger because .dropdown-content is not nested inside .dropdown. This is intentional as .dropdown represents a link (a) and the sub-menus also contain links (a). Placing it adjacent to .dropdown and using :hover on the parent li element will resolve this issue.

The reason the links are displaying inline is due to styling all li elements as inline-block. I have updated the style to be applied specifically to ul:not(.dropdown-content) li.

To ensure that the sub-menu does not affect the parent element or header when displayed, consider using absolute positioning on the sub-menu. Additionally, add position: relative to the parent li for correct positioning.

html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #0E0B16;
    }
    
    #wrap {
        height: auto;
        width: 100%;
        border-bottom-style: solid;
        border-bottom-color: #E7DFDD;
        border-bottom-width: thin;
    }
    
    ul {
        padding: 0;
        margin: 0;
        text-align: justify;
        background: #0E0B16;  
    }
    
    ul:not(.dropdown-content) li {
        list-style: none;
        display: inline-block;    
        text-align: left;
        position: relative;
    }
    
    a {
        color: #E7DFDD;
        text-decoration: none;
        display: block;
        margin-left: -4px;
        padding: 16px 25px;
        font-family: Verdana;
        font-weight: bold;
        border-right-style: solid;
        border-right-color: #E7DFDD;
        border-right-width: thin;
    }
    
    a:hover {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    a:active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .active {
        background-color: #E7DFDD;
        color: #0E0B16;
    }
    
    .dropdown-content {
        display: none;
    }
    
    li:hover .dropdown-content{
        display: block;
        position: absolute;
        left: 0;
    }
<!DOCTYPE html>
    <html>
    <head>
        <title>Witcher's World</title>
        <link rel="stylesheet" href="witcher.style.css"/>
        <meta charset="UTF-8">
      </head>
      <body>
        <header>
            <nav id="wrap">
                <ul>
                    <li><a  class ="active" href="witcher.index.html">Home</a></li>
                    <li><a href="#">Witcher Lore</a></li>
                    <li><a class="dropdown" href="#">Glossary</a>
                        <ul class="dropdown-content">
                            <li><a href="#">Characters</a></li>
                            <li><a href="#">Bestiary</a></li>
                        </ul></li> 
                    <li><a class="dropdown" href="#">Weapons</a>
                        <ul class="dropdown-content">
                            <li><a href="#">Swords</a></li>
                                <!--<ul class="dropdown-content">
                                    <li><a href="#">Steel Swords</a></li>
                                    <li><a href="#">Silver Swords</a></li>
                                </ul-->
                            <li><a href="#">Signs</a></li>
                        </ul></li>
                    <li><a href="#">Books</a></li>
                </ul>
            </nav>
        </header>
        
        <footer>
            
        </footer>
    </body>
    </html>

Answer №3

Include the following code snippet

.navigation-dropdown{
   position:relative;
}

.dropdown-items {
    display: none;
    position: absolute;
   top:100%;
}

.navigation-dropdown:hover .dropdown-items{
    display: block;
 }

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

Is there a way for me to choose every element excluding those contained within a specific div?

Check out my code snippet: <div class="car"> <div class="make">NISSAN</div> <div class="model">MICRA</div> </div> <div class="discontinued"> <div class="car"> <div class="make">FOR ...

htmlcsscss-selectors

CSS3 Icon: the content being placed is not consistently positioned

I'm utilizing CSS3 to create icons, and everything was going smoothly until I encountered an issue with a simple design. My goal is to have an exclamation mark centered inside a circle, but its position appears inconsistent. At times, it seems slightl ...

htmlcssinserticons

Support for Chrome in Angular 8

Can someone please advise on the minimum version of Google Chrome that is supported by Angular 8? Additionally, I am looking for a way to prompt users to update their Chrome browser if it doesn't meet the required version. My Angular application seems ...

javascripthtmlangular

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

javascripthtmlnode.jstypescriptvue.js

Is it possible for me to utilize the functionality of the "for" attribute in the label?

After searching extensively online with no luck, I found myself wondering if anyone is aware of a resource similar to the one provided by caniuse.com that outlines browser support for the for attribute within a label tag? I am specifically interested in t ...

html

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock

Applying FadeIn Effect to Background Image on Hover

For several applications, I have utilized this jQuery code that swaps images with a smooth fading effect. It's incredibly straightforward. $(document).ready(function() { $("img.a").hover( function() { $(this).stop().animate({ ...

jquerycsshoverfade

Our search box is showing suggested results but we are unable to access the specific product sku. What steps can we take to resolve this issue?

/* This is a global settings template for CSS. The code includes various styling rules for elements such as article, nav, form, header, and footer among others. There seems to be an issue with the CSS that may be affecting the functionality of a drop-down ...

csstemplatessearch-engine

Align a collection of images in a grid format on the center of the page with

I am trying to center a div that contains multiple 145px X 145px thumbnail images without setting a fixed width. The goal is to have as many images in each row as the browser window can fit. However, I want to keep the images left-aligned within the center ...

javascripthtmlcssdynamiccenter

What could be causing the div to not respond to ngAnimate?

Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the ...

javascripthtmlcssangularjs

I am unable to display the content even after setting `display: block` using the `.show()`

Hello there, I have attached my javascript and html code. While in debug mode, I can see that the CSS property 'display: none' changes to 'display: block', but for some reason, the popupEventForm does not open up. Any suggestions on why ...

javascriptjqueryhtml

Error encountered while attempting to load JSON data into HTML audio element

I need to incorporate data from a JSON file into an HTML audio tag. While I've been able to extract the desired information from the JSON, I'm facing difficulty loading it into HTML. Here's what I've tried so far: <?php $json = file ...

phpjsonhtml

Guide to activating form elements using a JQuery function

I need help setting up a form with 11 rows and 11 columns. By default, the form fields should be disabled, but when I click on an "EDIT" button, they should become enabled. Any assistance would be greatly appreciated. Thank you in advance. Here is my edit ...

javascriptjqueryhtmlforms

What is the best way to recreate this grid-like design using CSS?

By utilizing clever techniques such as margins and outlines, I was able to design the following. If you'd like to take a look at the live website, it can be found at The CSS code that I used is as follows: body { margin: auto; max-width: 736px } s ...

htmlcssgridoutline

Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...

javascriptjqueryhtmlcssswitch-statement

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

cssinternet-explorersvginternet-explorer-11

Unable to get Bootstrap IMG-RESPONSIVE to function properly in Firefox and IE within the navbar

I recently encountered an issue with the Bootstrap IMG-RESPONSIVE class not functioning properly in the navigation bar on Firefox and IE. Oddly enough, it was working perfectly just a few days ago until I made some unknown changes, causing it to only work ...

csstwitter-bootstrapresponsive-design

Overlap caused by padding between two elements

I'm encountering an issue where adding padding to a block element is causing it to overlap with the padding of other elements. Below is the code snippet showcasing this problem. <section class="hero"> <h1>Studying REDEFIN ...

htmlcss

Exploring Unicode Symbols for Icon Selection

I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering d ...

javascriptcssunicodeiconsglyphicons

Bootstrap dropdown menu fails to adapt to updated navbar height

I recently made a modification to the navbar size on my website, increasing it from 50px to 63px by tweaking a line in the bootstrap.css file. The exact code snippet I utilized for this adjustment is as follows: .navbar { position: relative; min ...

htmlcsstwitter-bootstraptwitter-bootstrap-3