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

Unusual behavior in iOS Safari when double-clicking or hovering

After completing a responsive redesign for one of my websites, I noticed an unusual behavior with the links that went unnoticed by testers: When clicking on these links, they are only "activated" but not followed. However, if you click them again, they wo ...

htmliossafari

An issue arises when trying to loop using a while loop within an HTML structure

I have a small project with a predefined format, where I need to select a value from a dropdown menu and use that value to fetch data from a database and display it in HTML. While I am able to retrieve the data from the database based on the selected value ...

javascriptphphtmlmysqlajax

Exploring Browser History using Cascading Style Sheets

Currently, I am in need of researching a topic for my University project. Unfortunately, the internet has not provided me with any information on this specific subject. The task at hand is as follows: "How and under what circumstances can one uncover ...

css

What could be the reason for the Javascript function failing to run?

I need assistance in executing a function called "send()" which includes an AJAX request. This function is located in ajax.js (included in the code snippet) The Ajax success updates the src attribute of my image. The function seems to be working correctly ...

javascriptjqueryhtmlnode.jsajax

What is the best way to link one element to another element?

Apologies for the mismatched title, but here's my issue: I need to create hidden checkboxes for each Polymer's paper-button div in jsp/style related problems. <%int i; %> <form ACTION="Computation.jsp"> <% for(i=0; i<n; ...

javascriptjqueryhtmljsp

How can I place text on top of an image with a filter using Bootstrap?

I am facing a challenge of overlaying text on an image with a tinted background color and opacity. While working with Bootstrap 4, I suspect that some classes might be conflicting with each other. This is my current setup: Index.cshtml: <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with Javascript functionality not persisting after page reload initiated with a href = '#'

I am facing an issue with a button on my webpage that is meant to redirect and reload the home page. However, after redirection to '#', my JavaScript seems to stop functioning correctly. Currently, my JavaScript code is enclosed within window.on ...

javascriptjqueryhtmlanchor

When a table has overflow set to auto, any content that exceeds its dimensions will

The issue at hand is explained in the fiddle provided. The problem arises when there is a scrollable table with a context menu inside it, and with the overflow-x: auto property set, the visibility of this "context menu" is hindered. table { overflo ...

htmlcss

Learn how to dynamically visualize Python charts on an HTML page with the Flask framework

I have created dynamic charts in Python, but I'm having trouble inserting them into my HTML page. Click here to view my charts and how I expect them to be visualized dynamically. Currently, I can only display the charts as static images on the HTML p ...

pythonhtmlflask

Conditional jQuery actions based on the selected radio button - utilizing if/else statements

This task seemed simple at first, but I quickly realized it's more challenging than expected. Apologies in advance, as Javascript is not my strong suit. My goal is to have the main button (Get Your New Rate) perform different actions based on whether ...

javascriptjqueryhtmlcss

horizontal menu consolidation

Web Design <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Online Hangout</title> <meta http-equiv="Content-Type" content="text ...

htmlcss

Tips for resizing an image to fit within a col-sm-12 column in Bootstrap

I have a dilemma with two columns - I want to place my image in the first column so that the second column can move down. see image here Here is my HTML code: <div class="container-fluid"> <div class="row"> ...

htmlcssresponsive-designbootstrap-5

Shifting annotations on a Bar Graph featuring Negative Values on Google's Chart Maker

Incorporating google charts into my MVC project. Looking to create a bar chart that accommodates negative values. Desire annotations on the same side as the end of the bar for negative values (similar to positive values shown in the green box below). ht ...

javascriptc#htmlasp.net-mvcgoogle-visualization

What is the best way to align a value within CardActions in Material UI?

I'm currently facing an issue with my website design. Here's a snapshot of how it looks: https://i.sstatic.net/UuBJJ.png Additionally, here is the code snippet related to the problem: <CardActions> <Typography style={{ fon ...

cssmaterial-ui

Two tables are positioned using distinct alignments but share a common stylesheet

I have created two tables, one using HTML (with a touch of PHP) and the other with two PHP loops. Starting with the stylesheet: .statistics { font-family: Arial, monospace; font-size: 36px; margin-left: 5%; width: 90%; } .statistics tr { ...

phphtmlcssformshtml-table

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

htmlcssangularlaravel-5

Setting a custom background image in a Bootstrap modal

When users visit my website, I want to enhance their experience by using a background image in my bootstrap modal. Despite several attempts, I have been unable to successfully set a background image in the modal. Can anyone provide guidance on this matter? ...

javascripthtmlcsstwitter-bootstrap

Ensure that dynamically generated fields are verified whenever one of them is modified

I am working on a program that generates text boxes and drop down lists dynamically. I need to find a way to validate these fields only when one of them is changed. The validation should occur if a date is entered in the text box, it should then check if t ...

htmlasp.netvalidationrequiredfieldvalidator

Troubleshooting Issue with Nested ng-include in AngularJS: Difficulty arises when the parent element with the ng-include attribute is dynamically added using the ng-

Click here to see a demo plunker that will help you understand my issue. On my main page, I have a table. Each table row is followed by a hidden empty row. When the first row is clicked, I use a directive to inject HTML into the empty row below it. Main ...

javascriptjqueryhtmlangularjs

The filter search feature fails to return any results when data is inputted into the tables

I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...

htmlcss