My sub menu bar is not working properly, I need to fix it so that it can dropdown correctly

I'm struggling with my sub menu layout and need some assistance in fixing it. I've tried numerous times to adjust it using CSS, but without success. Here is the link to my menu. I'm still learning CSS and could really use some guidance:

#megaMenu #megaST .no-megamenu .menu-row.sub-menu-0 {
top: 44px;
left: 0px !important;
}

#megaMenu #megaST .no-megamenu .menu-row.sub-menu-0 li {
width: auto;
float: none;
position: relative;
}

#megaMenu #megaST .no-megamenu .menu-row.sub-menu-0 li.item-parent:after {
content: '\e879';
position: absolute;
top: 6px;
right: 10px;
font-family: "fontello";
}

Answer №1

Your col1 div has been assigned a small width of 74px. To address this issue, include the following class in your CSS:

div.nav-dd.col1
{
 width:auto !important;
}

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

Content move to the left with Material UI's shifting capabilities

Is anyone experiencing an issue with Material UI dropdown Select and Modals causing the content to shift to the left? I attempted using position: absolute on both the Select element and MenuItems, but unfortunately the content still shifted. Has anyone e ...

The h3 element is not responding to the adjacent sibling selector

Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...

`Flexbox: Achieving Alignment of Items``

I am looking to align items in a specific way. My goal is to have 4 items in one row, and then the remaining 3 items in the next row, all centered. Despite setting the width at 25%, I am encountering some issues with alignment. Please check out the code ...

Looking to place the bootstrap menu icon on the right side of the page

I have a bootstrap menu item on my website and I want to move the menu icon to the right corner of the page. How can I modify the code to achieve this? #menu { position: relative; color: #999; width: 200px; padding: 10px; margin: auto; font-fa ...

What steps can be taken to enhance the responsiveness of this Bootstrap 4 code?

I've been trying to make this code more responsive, but I haven't found a suitable solution yet. When the browser window shrinks to mobile sizes, the list becomes too narrow and the picture/video items on the right end up small and aesthetically ...

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

After experimenting with sassdoc for documenting our sass mixins and functions, I realized that there doesn't seem to be a straightforward way to generate documentation for our sass variables. Specifically, I am looking for a solution that can output ...

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

Is it recommended to include the size of the box-shadow in the overall dimensions of the element?

I'm aware that by default it doesn't behave this way, but I'm attempting to make it do so. I'm in the process of constructing a button-shaped anchor with a solid box-shadow (no blur) to give the appearance of depth, and upon hovering, ...

Using an inline-block within a positioned absolute element

I am curious about the behavior of inline-block elements inside absolutely positioned elements. To better explain, I have provided an example below. We can see in the code snippet why the .icon within the .tag is not displayed like the previous .icon (whic ...

Curved divs display outlines on more compact dimensions

Check out this relevant Codesandbox There seems to be a recurring issue in my application where rounded divs display edges when they are of smaller sizes. Refer to the image below for a visual representation. What could be causing this problem and how can ...

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

Tips for showcasing a full body height background

I'm currently working on a project where I need to display random background images when the body loads. To achieve this, I've created a function. However, I'm facing an issue where the images are filling up the entire page, making it very l ...

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

While I am currently dealing with an older version of Symfony, I decided to create a new 5.3 Symfony application from scratch. However, I am facing difficulties when trying to integrate bootstrap into it. After consulting some documentation, I proceeded to ...

Faux CSS, every other moment appears to be unsuccessful

My HTML code looks like this: <div class="container"> <div class="foo">Foo!</div> <!-- if this is red... --> <div class="bar">Bar!</div> </div> <div class="container"> <div class="foo">Foo! ...

What advantages does incorporating inline CSS offer in comparison to using an external CSS file for background images?

I'm currently debating the best approach to take in this situation. Let's say I have a background image that I want to use on multiple pages, each with a different background image. The pages themselves must be responsive. Would it be better to g ...

Sliding panel, perhaps?

I've been working on a small project and I've managed to create this panel, but I'm looking to change the position of the "tab" to something similar to this Can anyone help me out? I'm still new to all of this~ http://jsfiddle.net/ ...

Discovering the tiniest value in every row within an HTML table with the help of PHP

I am working with a table that looks like this: 6xx 8xx 9xx 11xx 12xx 1 0.01 0.002 0.004 0.001 0.025 2 0.025 0.125 0.002 0.01 0.011 I need to highlight the smallest value in each row by making that cel ...

Is it possible to include a scroll bar at the top of an overflow-x <div> in addition to or instead of the bottom?

Can the scroll bar be positioned at the top of a table instead of just the bottom? <div style="overflow-x: auto;"> <table> ... ... </table> </div> I am looking for a way to have the scroll bar appear at the top of my t ...

Tips for showing more rows by clicking an icon within an Angular 2 table

When I click on the plus (+) button in the first column of each row, only one row expands. How can I modify it to expand multiple rows at a time? Thanks in advance. <div> <table class="table table-striped table-bordered"> <thead> ...

How can I adjust the appearance of an HTML tag within an Angular component?

I have created an Angular component with the following definition: import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'rdc-dynamic-icon-button', templateUrl: './dynamic-icon-button. ...