Ways to make the submenu display underneath the main menu

Click here to view the menu

It is important to note that you may need to expand the Result Box in order to see the full menu.

The issue I am currently facing involves fixing a submenu that appears when hovering over the Men and Women <li> elements. The hidden div is placed inside the <li> to ensure that the submenu remains visible even when moving your cursor away from the link. However, the problem arises when other menu items are being pushed down as a result of this setup.

In my previous version of the menu, which can be viewed here, everything was working correctly. But now, I have been requested to align the first three links to the left and the last link to the right. By simply adding floats to achieve this alignment, it seems to be causing the issue with the submenu positioning. I have experimented with changing the display and position properties, but the submenu ends up appearing at the end instead of below the menu.

I have exhausted most of my ideas on how to resolve this issue. One potential solution could involve using the x and y coordinates along with CSS to force the div into the correct position, although I am hesitant about its effectiveness if the div remains within the <li>. Are there any alternative methods I could explore to ensure that my submenu works properly while maintaining the alignment of the menu?

javascriptjqueryhtmlcssmenu

Answer №1

Did you achieve the desired result? I included my CSS code at the end of this document. To make the "Cart" entry float, I assigned an ID (cart) to the cart <li> element.

JSFiddle Link

This is a snippet of the code:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
  /* ie 6/7 */
}
/* Additional CSS Styles */

#copyright {
  text-align: center;
  margin: 0 auto;
  font-size: 10px;
}

... (additional CSS styles are present in the original text) ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
  function showMenu(heading) {
    $(heading).find("div[class='mega-menu']").css({
      display: "block"
    })
  }

  ... (JavaScript functions continue in the original text) ...

</script>

... (HTML code continues in the original text) ...

Answer №2

Take a look at the code on jsfiddle: http://jsfiddle.net/sbaxe5m3/2/

To implement this style, add the following CSS:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1; /* ie 6/7 */
}
/* Actual CSS */

#copyright { text-align:center; margin:0px auto; font-size:10px; }

#container { 
    width: 930px;
    margin:0px auto;
}

/* Rest of the CSS rules go here... */

.mega-menu
{
    float: left;
    z-index:1000;
    position: inherit;
    text-align:left;
    background:#aaaaaa; left: 50%;
    margin-left: -327px;
    position: absolute;
    top: 27px;
    width: 654px;
}

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

JavaScript for Office Spreadsheet Titles

I'm having trouble fetching the names of sheets from an external Excel file, as I keep getting an empty array. async function retrieveSheetNames() { const fileInput = <HTMLInputElement>document.getElementById("file"); const fileReader ...

javascripttypescriptoffice-js

Convert JavaScript objects into HTML format

Alright, I've got some JavaScript that's fetching data from a JSON file through a URL. Now, my goal is to convert each object (author_name, rating, author_url) into JavaScript IDs so that I can easily reference them in my HTML. For instance: &l ...

javascriptjqueryjsonhtml

Communicating between PHP chat client and server

Currently, I am developing a basic PHP web chat application that interacts with a MySQL database. The communication is facilitated through AJAX requests - when a user posts a message, it gets saved in the database. function sendData(){ var textData = $(& ...

javascriptphpmysqlclient-server

Enhancing user experience with AngularJS: Harnessing ng-Click for seamless task management on display pages

I'm struggling with my TodoList in AngularJS. I need help creating the ngClick function for the "addTodo" button. My goal is to send the entire form data to another page where I can display the tasks. Can someone guide me on what needs to be added to ...

javascriptangularjs

When flex items are stacked in a column, the bottom portion may be truncated

(Edit) Check out the codepen example here. I am working on creating a stack of cards using Vue.js and flexbox to showcase different apps on my website. Each card is represented by a component and I utilize Vue's `for` function to display cards with t ...

htmlcssvue.jssass

How can you make divs adapt to screen resizing in a similar way to images?

In my REACT project, I am faced with the challenge of positioning three divs next to each other, with a small margin between them, and ensuring they are horizontally centered on the screen. As the screen width decreases, I need the right-most div to move ...

htmlcssreactjs

How to capture and log request and response data when using the HttpService in NestJS?

Is there a way to log requests, responses, and errors using the HttpService within the HttpModule? In the past, I have used Interceptors with AXIOS. While HttpService wraps axios, I'm having trouble adding interceptors. There doesn't seem to be ...

javascriptnode.jstypescriptaxiosnestjs

Trigger ng-click after ng-model updates

Is there a way to create an ng-click function that will only execute after the value of the ng-model in a scope variable changes? In my scenario, I have a list of analysis objects within a list called analyses, each with an include boolean attribute used f ...

javascriptangularjsangularjs-ng-model

Anyone have any (placeholder) fetch URL parameters that require some time to resolve?

Can anyone share any fetch URL parameters that result in a loading time of roughly 5 seconds or longer for the promise to resolve when using fetch(urlArgument);? I'm eager to experiment and learn more. ...

javascript

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# However, when implementing the same in my project, I encountered: The issue is that the dropdown-men ...

jquerycssdjangotwitter-bootstrapdrop-down-menu

Having trouble with jQuery UI drag-and-drop feature when dropping onto an empty container or

Encountering an issue with the jQuery UI sortable widget where I am unable to drop any item into an empty container. Strangely, when the container already contains an item, it functions perfectly fine. The way I have called the widget is shown below: $(". ...

jqueryjquery-uijquery-ui-sortable

Integrate geographic data in GeoJSON format into a Leaflet map by using the Django template

In my Django view, I am fetching results of an SQL query and rendering it on the index.html page of my web map. The POST request successfully returns the acreage calculated from the SQL query to the page. I am also attempting to display the geojson data fr ...

javascriptdjangodjango-templatesleafletgeojson

PHP code in Wordpress incorporating an Ajax request

Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...

javascriptphpjqueryhtmlwordpress

Adjustable / consistent box height

For hours, I've been attempting to make some divs the same height. Check out my JSfiddle here: https://jsfiddle.net/4cj5LbLs/15/ I experimented with using display: table; in the parent element and either display: table-cell; or display: table-colum ...

htmlcsslayout

Having trouble customizing the appearance of wtform attributes

Hello Everyone, Here is the content of the .py file: from flask import Flask, render_template, flash, session, redirect, url_for from flask_wtf import FlaskForm from wtforms import StringField,SubmitField from wtforms.validators import Da ...

htmlcssflaskjinja2flask-wtforms

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

Could you offer guidance or suggestions on how to design a navigation bar (using Angular 1, jQuery, CSS, etc) that emulates the functionality of Google Chrome bookmarks bar when resizing the page? Essentially, as the page size decreases, a new button/symbo ...

javascriptjqueryhtmlcssangularjs

Encountering a timeout error when connecting to MongoDB

Utilizing node.js v12.0.10, I have incorporated MongoDB database to establish a connection and update MongoDB collection with the following connection code: async.parallel({ RE5: function (cb) { MongoClient.connect(config.riskEngineDB ...

javascriptnode.jsmongodbnosql

Incorporating an AngularJs App into Joomla: A Step-by-

As someone who is currently learning both Angular and Joomla, I am curious about the possibility of integrating an Angular JS Application within Joomla. While Joomla is known for its ease in creating articles and managing content through the admin panel, i ...

javascriptphpangularjsjoomlajoomla-extensions

Calculate the combined sum and alter the values of three input fields

There are three text boxes (testbox, testbox2, testbox3) that receive values from an input field, radio button selection, and checkbox. The correct values are displayed in testbox, testbox2, testbox3. Additionally, the sum of testbox, testbox2, testbox3 n ...

javascripthtml

Issue with MomentJS inBetween function consistently displaying incorrect results

I'm currently working on Vue Datatable and I have a specific requirement to search for records between two dates. I am using the moment.js library and the inBetween function to achieve this. Strangely, when I hardcode the dates, the function returns t ...

javascriptdatevue.jsmomentjsdate-parsing