The width of the container is exceeded by the drop-down menu during hover

My responsive drop-down menu is causing issues when the media query activates and I hover over the links, causing the width of the drop-down menu to extend beyond the container.

  <!--   Navigation Menu    -->
    <div class="container">
        <div id="navigation">
            <label for="show-menu" class="show-menu">Menu</label>
            <input type="checkbox" id="show-menu" role="button">
            <ul id="menu">
                <li><a href="#">| Home</a></li>
                <li>
                    <a href="#">| SERMONS <span>&#x25BC</span></a>
                    <ul class="hidden">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">| EVENTS<span>&#x25BC</span></a>
                    <ul class="hidden">
                        <li><a href="#">slam Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">LINK2</a></li>
                    </ul>
                </li>
                <li><a href="#">| CONNECT<span>&#x25BC</span></a></li>
                <li><a href="#">| STAFF<span>&#x25BC</span></a></li>
                <li><a href="#">| LOCATIONS <span>&#x25BC</span></a></li>
                <li><a href="#">| OTHERS</a></li>
            </ul>

        </div>
    </div>
    <!-- End of Navigation Menu    -->

Check out the CSS code below for styling:

#navigation {
    background-color: @bg-color;
    height: 50px;
    margin: 0px auto;
}

/*Arrow down style */
#navigation span{
    font-size: 10px;
    padding-left: 4px;
    line-height: 50px;
}

/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    width: 100%;
    position: absolute;
}

/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 1px;
    width:100px;

}

/*Style for menu links*/
li a {
    display:block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family:@Oswald;
    font-size: 16px;
    color: #fff;
    background: @bg-color;
    text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
    background: @light-gray;
}

/*Style for dropdown links*/
li:hover ul a {
    background: @light-gray;
    color: @white;
    height: 40px;
    line-height: 40px;
    width: 100%;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: @bg-color;
    color: @white;
}

/*Hide dropdown links until they are needed*/
li ul {
    display: none;
    position: absolute;
    z-index: 100;
}

/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    text-align: left;
}


/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
    min-width: 100%;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family:@Oswald;
    text-decoration: none;
    color: #fff;
    background: @bg-color;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

input[type='text']{
    color: @bg-color;
}

/*Responsive Styles*/

@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }

    li ul li a {
        text-align: center;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }

    .hide-tab {
        display: none;
    }

    #logo h1, #logo p {
        text-align: center;
    }


    #testr form {
        float: none;
    }

    #testr > form > input[type='text'] {
        margin: 0 auto; 
        width:60%;
        line-height: 60px;
    }    
}

I've attempted various solutions, but the issue persists. Even a simple width:100% doesn't seem to work. If you have any suggestions, please let me know. Thank you!

Answer №1

The definition of .container seems to be missing from your code.

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

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

Width of a floating division

I have been attempting to adjust the width (or max-width) of a floating div, but so far, none of the options I've tried have been successful. Below is the HTML code I am working with: <div class="tab-content"> <div id = "basicInfo" clas ...

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

Instant access to an interactive online platform

Is it feasible to create a shortcut from a webpage to my desktop for quick access? For instance, if a dynamic web page has 15 documents and I want to easily create shortcuts to them on my desktop by clicking on each one. I understand this is a brief quest ...

Is there a way to format a block of text so that right-to-left text aligns to the right, while left-to-right text aligns

I have a content block that includes text in both left-to-right and right-to-left languages, and I need to ensure that both display correctly. If the user begins with left-to-right text, it should be displayed from left to right with left alignment If the ...

Creating a vertical line at the bottom using CSS

Is it possible to add a centered line to the bottom of the "numberCircle" in a responsive table created with twitter-bootstrap? I would like it to look like this image: https://i.sstatic.net/WKgFu.jpg Thank you .numberCircle { border-radius: 50%; ...

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

What is the best method for integrating opensea-js using a script tag in a vanilla HTML/JS environment?

Is there a way to incorporate opensea-js into an html/js project that does not rely on node.js? The source code for opensea-js is only available on github and npm at https://github.com/ProjectOpenSea/opensea-js I came across this link: However, when I tr ...

Populate HTML drop-down menu with Java ArrayList

I am looking to implement multiple drop down select in JSF. I came across this code that offers a solution: <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple"> <optio ...

Extracting a string value that contains the InnerHTML for various rules

I am facing a challenge where I need to extract specific content from a string obtained from the client-side. The string contains the inner value of a DIV element, which is contenteditable and may include SPAN, P, and Table elements. My goal is to extract ...

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...

When the menu active item is clicked, the header will automatically scroll to the top

I've implemented a sticky header using CSS and JavaScript along with a mega menu. However, I've encountered an issue where when scrolling to the bottom and clicking on the "more" link in the dropdown, the page scrolls back to the top. This is the ...

"Exploring the World of Mobile Development and Screen Size

Currently, I am in the process of creating a basic mobile website that can be accessed through a QR code leading to the page linked below. However, I have encountered an issue where viewing it on my Android or Apple phone results in excess width. Any advic ...

Display block disappearance persists even after being set to none

Presented below is my menu design: <div class="span2 main-menu-span"> <div class="well nav-collapse sidebar-nav"> <ul class="nav nav-tabs nav-stacked main-menu"> <li class="nav-header hidden-tablet"><span ...

When the script is placed at the end of the file, document.getElementById() is still returning null

I need assistance with running a JavaScript function that is located at the end of my .aspx file. This is the div tag in question: <div id="div_NRContainer" oninit="div_NRContainer_Init" class="panelContainer" runat="server"> Following this, with ...

Bootstrap 5 introduces an innovative animated hamburger icon that transforms into an X symbol when clicked

I have encountered an unusual behavior when trying to animate the hamburger button using Bootstrap 5. Previously, with Bootstrap 4, everything worked smoothly. However, in Bootstrap 5, I noticed that the icon initially displays as 'X' and then sw ...

Contrast between using sendFile('/index.html') versus render('index') with Jade

As a newcomer to JS, I recently stumbled upon a similar question but with a different perspective. So my inquiry is: What are the advantages of using a Jade template in Express over simply sending raw HTML as a response? In other words, why would one choos ...

Is it possible to set the radius of a d3.js circle using a style attribute?

Learn more about styling in d3.js with this detailed guide that explains how style attributes can be leveraged to customize the look of a circle, including fill color, stroke color, and stroke width. Is it possible to adjust the radius of a d3.js circle u ...

Determine the count of checkboxes on a webpage by identifying the presence of the keyword 'type' in the page source code, utilizing Selenium with Python

Here is a code snippet to find the number of checkboxes on the current webpage: checkboxes = driver.find_elements(By.XPATH("html/body/div[2]/div/section[8]/div/div/div[3]/div/div[2]/table/tbody/tr[1]/td[1]/input[@type='checkbox']")) However, wh ...

Button positioned in the upper right corner

Trying to create a navigation menu like the one shown in the image below. https://i.sstatic.net/N9BQ5.png I've successfully styled the right corner, but I'm struggling to extend the top left corner. https://i.sstatic.net/cL0ZK.png Below is th ...