Tips for adjusting the alignment of the submenus in a megamenu

I am currently designing a complex menu system, specifically a mega menu. Initially, I attempted to add a submenu under one of the main menu tabs. The first image file showcases the CSS properties applied to this submenu design.

The subsequent file illustrates the HTML code structure used to create the submenu.

In the third image file, you can see the actual output. My goal was to display the submenu below the products section in a side-by-side alignment, but the outcome fell short of my expectations. While submenus with images work fine, I am encountering difficulties only when attempting to implement a submenu under the products category.

  For reference, here is the jsfiddle link to access the code - 
       `https://jsfiddle.net/chintu/eqx60spx/`
htmlcssmenu

Answer №1

**************************** FRESH FIND ****************************

Disregard the modifications made to the previous post; I believe I have discovered the solution:

.dropdown_5columns .col_1 {
  width:550px;
}

#menu li .dropdown_5columns #submenu li {
float: left;
}

**************************** OUTDATED ENTRY ****************************

I implemented those two adjustments.

/*.col_1 {width:130px;}*/ I ELIMINATED THIS WIDTH.
/*#menu li ul li {float:left;}*/ I HAVE CONFIGURED THIS TO FLOAT LEFT.

Do you consider my response helpful?

Answer №2

If you take out the "col_1" class from the parent div, the list items will align horizontally. Is this your goal? Alternatively, you could switch it to "col_5" or another wider column size.

<div class="dropdown_5columns">
  <div <!-- REMOVE THIS class="col_1" or change to wider column like "col_5" --> >
    <ul id="submenu"></ul>
    <div class="col_5">...</div>
    <div class="col_3">...</div>
  </div>
</div>

I suggest enclosing your link and image pairs within a container element like a DIV or even in list items. This way, you can apply CSS to those containers for better alignment.

.menu-gallery > div {
    display:inline-block;
    margin:5px;
    padding:5px;
}
<div class="menu-gallery">
  <div>
    <a href="#">Project Gallery</a>
    <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
  </div>
  <div>
    <a href="#">Product Gallery</a>
    <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
  </div>
  <div>
    <a href="#">Reference Projects</a>
    <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
  </div>
  <div>
    <a href="#">Partners & Assosciates</a> 
    <img src="img/02.jpg" width="100" height="70" class="img_left imgshadow" alt="" />
  </div>
</div>

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

Place a three.js canvas within a designated div element

I'm just starting out on my journey. After creating a 3D model in Blender, I want to showcase my work on a portfolio website. Following an online tutorial, I was able to render my .gltf model in a canvas with the correct dimensions. However, I'm ...

htmlthree.js

Is the parent node of the input element the input element itself?

When working with a DOM object obj of type <input>, I encountered an issue where attempting to obtain its parent node using obj.parentNode resulted in the same obj being returned. Is this behavior specific to <input> objects? What other types o ...

javascripthtmldom

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...

javascripthtml

Fade out embedded images or target specific classes when hovering over them with the mouse

Is it feasible to use JavaScript or jQuery to fade only the embedded image instead of the entire div, revealing the background image of the div? I have multiple instances of the classes below and wish to apply these changes only to the selected ones. For ...

javascriptjqueryhtmlcss

Can PHP code be extracted from a file that has been loaded by other PHP code?

I am importing HTML/PHP code from an external text file using the following code: $f = fopen($filename, "r"); while ($line = fgets($f, 4096)) { print $line; } Is there a way for the server to interpret the PHP code within this file? Currently, I am me ...

phphtml

Encountering a PHP issue while attempting to embed Google Trends into an HTML element

I am encountering an issue while attempting to assign the html property of a jquery element to embed Google Trends. <!DOCTYPE html> <html> <head> <title>Titlw</title> </head> <body> <div class="hide ...

phphtmljqueryajaxgoogle-trends

Receive two inputs in each row and adjust the width of the submit button

As I embark on my journey of coding my very first website, everything has been running smoothly until a recent obstacle caught me off guard. My current challenge lies in creating a contact form that seamlessly integrates with the home page. I envision hav ...

htmlcssforms

Is it possible to generate a separate table for each user using PHP?

Embarking on a new adventure, I have chosen to create an online shopping website for a college project. My roadblock comes at the sign-up stage. I envisioned users having separate tables to store products they add to their carts, allowing them to add more ...

phphtmlmysqldatabase-design

Ways to prevent a page from scrolling

I'm currently working on a webpage that features a vertical drop-down menu. The issue I'm facing is that when the menu drops down, it causes the text below it to be pushed downwards and off the page. While this behavior is anticipated, it also tr ...

htmlcssscroll

Ways to take out an object from the scene in three.js

As a complete beginner in three.js, I am currently working on a small website and facing an issue. Everything is functioning correctly, but I am struggling to remove an OBJ from the scene. How can I achieve this? Specifically, I would like the OBJ to disa ...

htmlthree.js

What is the correct way to set up getElementById?

Having some trouble with the getElementById() function not functioning as expected and unable to identify the issue. This is an excerpt of my HTML body: <button type="button" id="up">Increase Volume</button> <button type ...

javascripthtmlcss

Unable to retrieve list using Selenium in C# due to issues with FindElements method

Currently, I am working with C# and NUnit. I have encountered an issue where I need to extract the value from a span element and store it in an ArrayList. This is the code I am using to retrieve the price list: var productprice = driver.FindElements(By. ...

c#htmlcssvisual-studioselenium

CSS files imported from the node modules are mysteriously disappearing

Encountered a unique issue while attempting to import a CSS file from a node module. In the App.tsx file, the following imports were made: import './App.css'; // successful import '@foo/my-dependency/dist/foo.css' ...

csswebpackwebpack-dev-servercss-loader

Using PHP header function to redirect to a specific form on an HTML page: A step-by-step guide

I have a dilemma in my web project. In the index.php file, there are two forms that utilize transitions to switch between pages (Login and Register). When attempting to register a new user in the backend, I check if the user already exists. If they do exis ...

phphtmlforms

Unveiling the hidden secrets of HTML code through scraping

Looking to extract data from the cadastral records in Poland available at . Specifically, I am interested in retrieving information from the element tagged with id 'gfi_0'. The challenge is that this element is not immediately accessible; it only ...

pythonhtmlseleniumweb-scrapinghtml-table

Adjust the positioning of several divs using CSS floats

Can the pink div (link3/link4) start at the same top position as the div (link1/link2)? Or do I still need a wrapper div for the left button bar, TreeDiv, and another one for the right button bar + DataGridDiv? CSS html { background-color:Yellow; ...

htmlcsscss-float

What could be the reason for an element with a width of 100% not recognizing the width of its parent?

One issue I'm currently experiencing is my inability to match the width of the parent within a flexbox item. Below is the code snippet, where the span element does not have the same width as its parent. .container { display: flex; } .item1 { ...

htmlcssflexbox

asymmetrical bootstrap grid columns

I am working with the Bootstrap 4 grid system and have a layout with 3 columns. I want the first and third columns to be col-8, and the second column to be col-4, acting as a sidebar that falls between the first and third columns on small screens. However, ...

csstwitter-bootstrapbootstrap-4flexboxbootstrap-5

converting blob to base64 in javascript

I need assistance with decoding a blob object to a base64 string using JavaScript. Here is the code I am working with: var reader = new FileReader(); reader.addEventListener("loadend", function () { // Accessing contents of blob as a typed array ...

javascripthtmlbase64blob

Monochrome Effect Triggered by Cursor Hover

I'm attempting to use Javascript with HTML5 canvas to convert an image to greyscale, but I seem to be missing something in my code. Can anyone spot the error? I feel like I'm very close! function grayscaleConversion(str) { // Access the Canv ...

javascripthtmlcanvasgrayscale