Ways to position Drop-down menu flush against the left edge of the webpage?

I am facing a challenge in customizing my CSS3 Mega drop-down menu. I want the mega menu to start from the left side of the main page, beginning from the home button area and extending all the way to the end. Currently, it is appearing where the parent menu is located and extends beyond the right border of the page. Can you assist me with this? Below is the code snippet for reference: 

body,
ul,
li {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 21px;
  text-align: left;
}
#menu {
  list-style: none;
  width: 940px;
  margin: 30px auto 0px auto;
  height: 43px;
  padding: 0px 20px 0px 20px;
  /* Rounded Corners */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* Background color and gradients */
  background: #014464;
  background: -moz-linear-gradient(top, #0272a7, #013953);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
  /* Borders */
  border: 1px solid #002232;
  -moz-box-shadow: inset 0px 0px 1px #edf9ff;
  -webkit-box-shadow: inset 0px 0px 1px #edf9ff;
  box-shadow: inset 0px 0px 1px #edf9ff;
}
#menu li {
  float: left;
  display: inline-block;
  text-align: center;
  position: relative;
  padding: 4px 10px 4px 10px;
  margin-right: 30px;
  margin-top: 7px;
  border: none;
}
#menu li:hover {
  border: 1px solid #777777;
  padding: 4px 9px 4px 9px;
  /* Background color and gradients */
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
  /* Rounded corners */
  -moz-border-radius: 5px 5px 0px 0px;
...

<div style=" background-color:#C80BE0; height:95px; border-bottom:#999 1px solid;">
  <table width="950" align="center" cellpadding="0" cellspacing="0">
    ...
</div>

htmlcss

Answer №1

If you're looking to adjust the positioning of the #menu element, it's best to set its position relative rather than adjusting the parent menu item.

#menu {
  position:relative;
}
#menu > li {
  position:static;
}
#menu > li:hover > div {
  width: 100%;
  box-sizing: border-box; // this ensures padding is included in the 100% width
}

To implement these changes, make sure to update your existing CSS selectors accordingly instead of simply appending them at the end. This way, your styles will be more organized and targeted effectively.

Furthermore, if you aim for all dropdowns to have full width, consider revising your naming convention like .dropdown_fullwidth. This can streamline your code and enhance consistency.

Explore an interactive example 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

How to responsively position and scale a background image for a full-width div

Here is the situation: I have an SVG with dimensions of 1920*1920 pixels () This is what I require: I intend to use it as a background-image for a div that spans the full width of the screen. The background image for the div must be responsive. An essent ...

cssreactjssvgbackground-image

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

csshtmlvideoembedcss-position

AngularJS: Understanding the difference between ng-show and using display:none

I recently encountered a scenario where I needed to hide an HTML element by default using CSS. Here's how I did it: HTML: <div class="box"> </div> CSS: .box { display: none; } However, I wanted to be able to show and hide the elem ...

javascriptcssangularjsng-show

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...

javascriptjqueryhtmlcssload

What is the best way to refresh the slick jQuery plugin for sliders and carousels?

I am currently facing an issue with two buttons that have the same function. The purpose of these buttons is to retrieve data from an API, convert it to HTML, and then append it to a <div> using jQuery. Finally, the data is displayed using the slick ...

javascriptjqueryhtmlslider

The form created using jQuery is not submitting correctly because the PHP $_FILES array is empty

Creating an HTML form dynamically in jQuery and submitting the form data via Ajax to 'add_sw.php' for processing is my current challenge. However, I have encountered an issue where the PHP script cannot access the PHP $_FILES variable as it turn ...

javascriptphpjqueryhtmlajax

Does strip_tags() have vulnerabilities to scripting attacks?

Has there been any known XSS or other attack that can bypass the following code snippet? $content = "some HTML code"; $content = strip_tags($content); echo $content; This function does not modify any attributes on the tags that you allow using ...

phphtmlsecurityxssstrip-tags

I am in need of a JavaScript event that will take precedence over the CSS pointer

There is an image causing issues with scrolling on a mobile device because it's located in the finger-friendly area where people tend to scroll. I attempted to use pointer-events: null; to allow scrolling, but this also prevented the click event from ...

jquerycsseventsscrollpointer-events

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

javascriptcssangulartypescriptangularjs-directive

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

javascripthtmlangularjsangularjs-ng-repeat

Fixing the Bootstrap Datepicker: A Step-by-Step Guide

Is there a way to configure the Datepicker to display today's date and tomorrow's date? Click here for the JS file Check out the image on our website https://i.stack.imgur.com/VyFUB.jpg ...

javascriptjqueryhtmldatedatepicker

How can you determine the class of an element that was clicked within an iframe?

Is it possible to retrieve the class of an element that is clicked within an iframe? Here is the HTML code: <input id="tag" type="text"> <iframe id="framer" src="SameDomainSamePort.html"></iframe> This is the JavaScript code: $(docum ...

javascriptjqueryhtml

What is the best way to allow a number to be editable when clicked on in a React application

Currently, I am trying to find a solution for making a number editable when clicked without having to use form inputs or other React libraries that don't fit my requirements. The provided screenshots showcase the desired interface. https://i.stack.im ...

javascriptcssreactjs

Interacting with CSS buttons using Selenium

Currently, I am working on a test case in Java where I am using Selenium to record a series of events and then play them back on an application. Here is the code snippet I have: // *The app opens a new window* // Get handle of the main window Stri ...

javacssseleniumcss-selectorsclick

The "click" event is only effective for a single use

I am looking for a way to trigger the click event more than once in my project. I attempted using "live" but it didn't work as expected. There are 2 other similar scripts in this Django project. If you have any suggestions on improving this project, p ...

javascriptjqueryhtmldjango

Create code with a form button and showcase the produced code on the webpage

I have created two files: code_generator.html, which takes input in the form of an image URL and landing URL. When I click on the submit button, it calls code_created.php. <html> <head> </head> <body> <form a ...

phphtml

When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...

htmlcssprintingmedia

Hovering over the designated area will reveal the appearance of

I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :h ...

htmlcsstwitter-bootstraphoverbootstrap-4

Is it possible to detach keyboard events from mat-chip components?

Is there a way to allow editing of content within a mat-chip component? The process seems simple in HTML: <mat-chip contenteditable="true">Editable content</mat-chip> Check out the StackBlitz demo here While you can edit the content within ...

htmlangulartypescriptangular-material

Utilizing Ruby interpolation to dynamically select elements in Capybara's CSS selectors

Having trouble with invalid selector errors when attempting to locate an element using capybara This method is successful: page.find("#widget_amount_Standard") But I encounter issues when trying any of the following: credit_type = "Standard" page.find( ...

cssrubycapybara