Creating a wide-ranging megamenu with CSS only

I am interested in creating a full-width Mega menu. Here is the link for reference: http://codepen.io/tanmoy911/pen/KzjVdq

My CSS code follows a 12 column grid system.

.fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}
.fui-navbar li{float:left}.fui-navbar li a{display:block;padding:.5em 1em}.fui-navbar li a:hover{color:#000;background-color:#ccc}
.fui-navbar .fui-dropdown-hover,.fui-navbar .fui-dropdown-click{position:static}
.fui-navbar .fui-dropdown-hover:hover,.fui-navbar .fui-dropdown-hover:first-child,.fui-navbar .fui-dropdown-click:hover{background-color:#ccc;color:#000}
.fui-navbar a{text-decoration:none!important}
.fui-navbar .fui-right{float:right!important}
.fui-navbar a,fui-dropdown-content a
{-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}
.fui-dropdown-click,.fui-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.fui-dropdown-hover:hover .fui-dropdown-content{display:block;z-index:1}
.fui-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}
.fui-dropdown-content a{padding:6px 16px;display:block}
.fui-dropdown-content a:hover{background-color:#ccc}
.fui-container:after,.fui-row:after,.fui-row-padding:after,.fui-topnav:after,.fui-clear:after,.fui-btn-group:before,.fui-btn-group:after
{content:"";display:table;clear:both}

/*Grid System*/
.fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%; padding: 0.375em;}
.fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%}
.fui-col.l1{width:8.33333%}
.fui-col.l2{width:16.66666%}
.fui-col.l3,.fui-quarter{width:24.99999%}
.fui-col.l4,.fui-third{width:33.33333%}
.fui-col.l5{width:41.66666%}
.fui-col.l6,.fui-half{width:49.99999%}
.fui-col.l7{width:58.33333%}
.fui-col.l8,.fui-twothird{width:66.66666%}
.fui-col.l9,.fui-threequarter{width:74.99999%}
.fui-col.l10{width:83.33333%}
.fui-col.l11{width:91.66666%}
.fui-col.l12{width:99.99999%}

HTML Snippet:

.fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}
    .fui-navbar li{float:left}.fui-navbar li a{display:block;padding:.5em 1em}.fui-navbar li a:hover{color:#000;background-color:#ccc}
    .fui-navbar .fui-dropdown-hover,.fui-navbar .fui-dropdown-click{position:static}
    .fui-navbar .fui-dropdown-hover:hover,.fui-navbar .fui-dropdown-hover:first-child,.fui-navbar .fui-dropdown-click:hover{background-color:#ccc;color:#000}
    .fui-navbar a{text-decoration:none!important}
    .fui-navbar .fui-right{float:right!important}
    .fui-navbar a,fui-dropdown-content a
    {-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}
    .fui-dropdown-click,.fui-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
    .fui-dropdown-hover:hover .fui-dropdown-content{display:block;z-index:1}
    .fui-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}
    .fui-dropdown-content a{padding:6px 16px;display:block}
    .fui-dropdown-content a:hover{background-color:#ccc}
    .fui-container:after,.fui-row:after,.fui-row-padding:after,.fui-topnav:after,.fui-clear:after,.fui-btn-group:before,.fui-btn-group:after
    {content:"";display:table;clear:both}
    
    /*Grid System*/
    .fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%; padding: 0.375em;}
    .fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%}
    .fui-col.l1{width:8.33333%}
    .fui-col.l2{width:16.66666%}
    .fui-col.l3,.fui-quarter{width:24.99999%}
    .fui-col.l4,.fui-third{width:33.33333%}
    .fui-col.l5{width:41.66666%}
    .fui-col.l6,.fui-half{width:49.99999%}
    .fui-col.l7{width:58.33333%}
    .fui-col.l8,.fui-twothird{width:66.66666%}
    .fui-col.l9,.fui-threequarter{width:74.99999%}
    .fui-col.l10{width:83.33333%}

    <!-- Menu Markup -->
    <ul class="fui-navbar fui-card-2 fui-light-grey">
      <li><a href="#">Home</a></li>
      <li><a href="#">Link 1</a></li>
      <li class="fui-dropdown-hover">
        <a href="#">Dropdown</a>
        <div class="fui-dropdown-content fui-white fui-card-4">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>

I am struggling to make my menu full-width like the one on this site: .

Any suggestions on how to modify my existing code to achieve a full-width menu would be greatly appreciated. Thank you!

htmlcss

Answer №1

You're only missing the left:0 property.

To avoid affecting the top menu, you can create a new class (.ff-left) and add it to the fui-dropdown-content class.

.ff-left{left:0;}

Check it out here

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

Tips on eliminating expansion upon button click in header within an Angular application

While utilizing Angular Materials, I encountered a challenge with the mat-expansion component. Every time I click on the buttons within the expansion panel, it closes due to the default behavior of mat-panel. Requirement - The panel should remain expanded ...

htmlcssangularangular-material

Basic Search tool, displaying a <div>

Hey there, I've been searching for a solution for a while now and haven't found one yet. So here's my question: I created a simple website to display random recipes for those times when you're not sure what to make for dinner. I also w ...

javascripthtml

What is the best way to design a Global Navigation menu for websites?

For example, I am looking to integrate a Navigation menu into my website using just one file. I have considered using PHP or creating an HTML frame, but I am wondering what the current industry standard is for professionals. Any insights? ...

javascriptjqueryhtmlcssnode.js

Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

As a newcomer to REACT, I am facing an issue with changing the theme colors in my freshly bootstrapped react application. I have gone through some solutions suggested by others but none of them seem to work for me. My entry point looks like this: import ...

cssreactjssassbootstrap-4

Recalling a hidden div in a flexbox arrangement

I am facing a challenge with hiding and displaying two aside divs to enable a fullscreen view of my central div main. The layout is created using flexbox to assign proportions, but when I try to redisplay the elements, it disrupts the original design. Belo ...

javascriptcssd3.jsflexbox

Is there a way to automatically update the input value when I refresh the page following a click event?

Currently, I have multiple p elements that trigger the redo function upon being clicked. When a p element is clicked, the quest[q] template is loaded onto the .form div. These templates are essentially previously submitted forms that sent values to an obj ...

javascriptjqueryhtmlformshandlebars.js

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

jqueryhtmlcss

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Initially, my React App functioned perfectly with global CSS included. However, after running npm i next-images, adding an image, modifying the next.config.js file, and executing npm run dev, I encountered the following notification: "Global CSS cannot ...

cssreactjsimportsassnext.js

Is there a way for me to determine which .js script is modifying a particular HTML element?

Let's take a look at a specific website as an example: This particular website calculates value using a .js script embedded in the HTML itself. Upon inspecting the source code by pressing F12, we can locate the element containing the calculated valu ...

javascripthtmljquerycssreverse-engineering

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

Place the div's scrollbar at the beginning of its content

Recently, I put together a custom CSS modal that includes a scrollable div (without the modal itself being scrollable). Interestingly enough, when I initially open the modal, the scrollbar of the div starts at the top as anticipated. However, if I scroll d ...

javascripthtmlcss

"Stylish hover effect for list items using CSS arrows

I'm struggling with creating a list menu that has a 1px border and spans the entire width. Here is what I have so far (image 1): https://i.stack.imgur.com/y3EDP.png The tricky part is making it so that when the mouse hovers over a menu item, someth ...

css

What is the best way to make my input tags move downwards when resizing the screen?

I need help with a grid layout. My goal is to have the input tags (marked in blue) shift below when resizing the browser or viewing on a mobile or tablet device, while keeping the other three tags on the same line. I attempted to position the small box to ...

htmlcsscss-grid

Flexbox - managing wrapping on legacy devices

Utilizing flexbox, I have successfully designed a 2 column layout with a div at the top spanning both columns for a menu format. While this works flawlessly in Chrome and iOS7, it appears to be ineffective in outdated versions of Safari. In this fiddle, yo ...

htmlcssflexbox

Stylesheet for a React component

Why is the CSS code in my React component file not working even though I have imported it? import React from 'react'; import { Carousel } from 'react-bootstrap'; import './Banner'; ...

cssreactjs

CSS Flexbox: Dealing with Overlapping Flex Items on Narrow Screens

Hey there! I've successfully created a custom timeline using flexbox, but I'm encountering an issue on smaller screens. As the window size decreases, the flex items start to overlap. Is there a way you can assist me in adding some space without d ...

cssflexboxoverlaptimeline

Creating a scrolling sidebar in Bootstrap 4

Today I learned about CSS Bootstrap 4 and created my template with a sidebar. However, when there are many menus, I want the sidebar to show a scrollbar. I am looking for help on how to make a scrollbar appear on my sidebar template. Below are my HTML and ...

cssbootstrap-4scroll

Move the option from one box to another in jQuery and retain its value

Hey guys, I need some assistance with a jQuery function. The first set of boxes works perfectly with the left and right buttons, but the second set is not functioning properly and doesn't display its price value. I want to fix it so that when I click ...

javascriptjqueryhtml

How to prevent the animation from triggering when changing the theme

Currently, I am developing a game that is similar to the concept of . In my game, I have implemented both dark and light themes along with animations that are triggered when the API sends a response (such as flipping a div and changing the background col ...

cssreactjsanimationmaterial-ui

The td data is appearing fragmented and not continuous in one line

Why is the td element on my webpage not appearing on a single line? The weekly report for XYZ is displaying on two lines, but I want it to be on one line. Why is the label content showing up on the next line? Output: Weekly Report for Testing project ...

htmlcssasp.net