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

Invoking functions with JavaScript objects

Can anyone help me figure out what is wrong with the following JavaScript code? <form> What is 5 + 5?: <input type ="number" id ="num_answer;"/> </form> <script> function basic_math(){ var num_val = document.getElem ...

javascripthtml

Alternative Options for Playing Audio in Internet Explorer 8

I'm in the process of setting up a button that can both play and pause audio with a simple click. While this functionality is working smoothly in modern browsers like Google Chrome, I am facing compatibility issues with IE 8. Even after attempting to ...

javascriptjqueryhtmlaudiointernet-explorer-8

Unable to make changes to the text within the textarea field

Currently, I am in the process of creating a script to streamline the tedious task of providing teaching feedback. To scrape data such as student names and classes, I am utilizing selenium/python. While everything is running smoothly, I have encountered an ...

javascriptpythonhtmlselenium

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

javascriptjqueryhtml

Tips for sending parameters to XSLT using a Javascript function

Despite my efforts to find a solution in various online posts, I haven't been able to resolve the issue. The challenge lies in my HTML file that includes a JavaScript function for parsing XML and rendering XSLT. I have multiple 'records' in ...

javascripthtmlxmlxsltxml-parsing

I'm looking for a simple calendar widget that can be clicked on using only plain JavaScript/jQuery and is compatible with Bootstrap

I'm in search of a simple clickable calendar widget to integrate into my website. I am using a combination of HTML, CSS, Bootstrap 5, and jQuery 3.6 for development. The functionality I require is for the calendar days to be clickable so that I can di ...

javascripthtmljquerycalendarbootstrap-5

How to horizontally center a div between two floated elements

Check out this JSFiddle example. I'm facing a challenge in horizontally centering the div class="filter-group" between two floated buttons within the given example. I've tried various methods but haven't been successful so far. Any assistan ...

htmlcsstwitter-bootstrap-3

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Is there a way to change the positioning of a button in a window using JavaScript and Electron? I am trying to create new input boxes next to existing ones, but they always appear below the last one created. Is it possible to specify x and y coordinates fo ...

javascripthtmlelectron

Populate List Items until Maximum Capacity is Reached and Increase the

Is there a way to make a ListItem fill the list vertically while also being able to overflow it if needed? I'm looking for a solution that would allow me to access the height of the empty space in the list, which I believe would be the minHeight. Som ...

javascriptcssreactjstypescriptmaterial-ui

Tips for choosing a specific quantity and adjusting its value

Just starting out with Ionic 3 and looking for some help with the code. Can anyone assist me in understanding how to change the value of an item in a shopping cart and have the subtotal reflect that change? cart.ts private _values1 = [" 1 ", "2", " 3 "," ...

javascripthtmlangulartypescriptionic-framework

"Utilizing multiple class names in Next.js to enhance website styling

Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...

cssreactjsnext.jsclassname

Customize your webpage's style to reflect your unique identity with user

Is there a way to allow users to customize the style of a webpage? I know I need multiple CSS files, but how can I implement the code that enables this customization based on user preferences? ...

phpjavascriptcssajax

Changing the height of a Bootstrap 3 row without using less variables

Can someone please explain how to adjust the .row width in Bootstrap so that the col grid still functions correctly, but certain .rows are tighter than default? Thank you. ...

htmlcsstwitter-bootstrap

Vue.js - I am looking to create dynamic buttons that change color when clicked

I have dynamically created buttons using v-for and now I want the clicked button to change color while the others remain the same. <template> <div id="exam-screen" class="exam jumbotron"> <h1>{{ title }}</h1> <div cl ...

javascripthtmlvue.js

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

Creating vibrant row displays in Vue.js: A guide to styling each row uniquely

I am not a front-end developer, so Vue and JS are new concepts for me. Currently, I am working on an application for managing sales. One of the components in my project involves displaying invoices in a list format. To make the rows visually appealing, I ...

javascripthtmlcssvue.js

Personalized Horizontal Radio Button Design

I have been struggling to achieve the desired design for radio buttons but without success. https://i.sstatic.net/TU7Ks.png Despite using bootstrap for my website, I am only able to achieve this: https://i.sstatic.net/WbzqS.png This is the code I am cu ...

htmlcsstwitter-bootstrap

Guide on submitting a get form and retrieving the information

Currently, I am employed as a penetration tester for a company. While conducting an analysis of their website, I discovered a vulnerability where CSRF tokens are generated via a GET request to the page localhost/csrf-token and then provided in plaintext fo ...

javascriptphpjqueryhtmlcurl

"Can anyone tell me why my index.html file isn't recognizing the style.css file located in my css directory

In the directory structure below, I have the following files: mywebsite/ ├── css/ │ ├── style.css │ ├── index.html This is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

htmlcssxampp

a container holding two floating divs

I have been attempting to create two divs positioned side by side, with one containing content and the other acting as a sidebar. Both of these divs are contained within another larger container div. Despite my efforts, I have not been successful in achiev ...

htmlcsscontainers