The menu shifts position or overlaps next to the current active menu option

It would be helpful to take a look at the URL provided (http://ymm.valse.com.my/) in order to understand my question better.

Upon clicking on any menu item, I noticed that the menu next to the active tab overlaps. I believe the issue lies in the width property. I have tried setting it to width:auto; with no success. Even specifying a fixed width like width:150px; did not solve the problem. Can someone please assist me in resolving this?

I am currently using Superfish.

CSS

/* CSS code goes here */

HTML

<!-- HTML code goes here -->

If a script is needed:

<script type="text/javascript">
// JavaScript code goes here
</script>
jqueryhtmlcss

Answer №1

The reason for this issue is the position: absolute property on the .active class, which affects the positioning of the a elements inside the li:

.sf-menu a.active {
  margin-top: -5px;
  height: 51px;
  padding-top: 15px;
  position: absolute;
  z-index: 100;
  background-color: #072438;
}

Absolute positioning removes the element from the normal document flow, causing the menu to ignore its presence. It is recommended to remove this property.

Update: To resolve this, you can either assign another class to the parent li and set border-bottom: 0, or apply the .active class directly to the li and modify the corresponding a element. Example:

.sf-menu li.active{
  border-bottom: 0
}

.sf-menu li.active a {
  margin-top: -5px;
  height: 51px;
  padding-top: 15px;
  z-index: 100;
  background-color: #072438;
}

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

Conforming to HTML5 standards with ASP.Net DataList

I am currently working on updating my ASP.Net 4.0 website to comply as closely as possible with HTML5 specifications. One issue I have encountered is that whenever I use a DataList, it automatically adds the attribute cellspacing="0". I have tried various ...

asp.nethtml

"Troubleshooting a Responsive Design Problem: Horizontal Scroll Bar Appears on Low Res

My website is experiencing an odd issue with responsiveness. When viewed on desktop resolution in Chrome, there is no horizontal scroll. However, when I resize the browser to lower resolutions (400px width and less), the horizontal scroll appears. It see ...

csswordpressresponsive-design

Tips for embedding external URLs into a div element without using an iframe

I need help loading an external URL into a div without using iframe, embed, or object tags. I have tried examples but they do not seem to be working properly. Here is an example of what I have tried: $("#testDiv").load("//localhost:8000/cities/Mountain%2 ...

javascriptjqueryangularjs

Managing the URLs of single page applications

Typically in a Single Page App (SPA), there is usually one main page that contains a side navigation menu with various anchor tags. These anchor tag URLs are managed by the angular/react/sammy js router, and the content of the main section is updated based ...

jqueryangularjsreactjssingle-page-applicationsammy.js

Choosing between classes and styles for styling components in ReactJS

Can you explain why the call to the classes object works in the code below, rather than to the styles object defined as a const at the beginning? For instance, take a look at this demo: className={classes.button} The above line functions correctly. Howe ...

javascriptcssreactjsclassmaterial-ui

Enhance your database interactions with the powerful combination of M

Check out the code snippet below that I'm currently using. AJAX $.ajax({ type: "GET", url: "process.php", dataType: "html", success: function(data){ $(".content").html(data); } }); $("#submit").click(function(){ $.aja ...

phpjquerymysqlajaxmysqli

What could be the reason for the padding not functioning properly on my Bootstrap 5.3 webpage?

What could be the reason for pe-5 not functioning properly? <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e233e22">[email protect ...

htmltwitter-bootstrapbootstrap-modalbootstrap-5padding

Embedding images within written content

Is there a way to insert an image into text from a specific position without using tables? I'm looking for a method other than aligning the image "left or right". https://i.sstatic.net/8gvxk.png ...

htmlcss

Updating parameter value upon the execution of an internal function in Javascript

How can I log the text from a textbox to the console when a button is clicked in this code snippet? <body> <input type="text" id="ttb_text" /> <script type="text/javascript"> function AppendButton() { var _text = ''; ...

javascriptjqueryfunction

What steps should I take to grant API access if cross-browser requests are restricted?

Creating a C# web service to retrieve data from a server raises the question of how to grant API access to other users who want to query it using client-side code. For example, imagine the web service is hosted on Domain1.com. How can someone from Domain2 ...

c#javascriptjqueryasp.netajax

Ways to implement material-ui button design on an HTML-native button

I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui. Trying to nest buttons within buttons is considered not allowed. An approach that works is manually assigning th ...

javascriptcssreactjstypescriptmaterial-ui

Missing jQuery data attribute value detected

I have two custom data attributes within the <option> element, which hold the latitude (lat) and longitude (lng>) for mapping purposes:</p> <pre><code><option id="riderInfo" data-lat="" data-lng=""></option> </pre ...

javascriptjquery

Ensuring text is perfectly centered within a div, regardless of its length

In the quest to center text of unknown length within a div, challenges arise. Constraints limit its size to a certain extent, making it unclear whether one or two lines will be needed. As such, traditional methods like line-height are not viable options. A ...

csshtmlpositioning

The instance is referencing "greet" during render, but it is not defined as a property or method

At the same time, I encountered another error stating "Invalid handler for event 'click'". <template> <div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:cli ...

javascripthtmlvue.js

Utilizing jQuery and Bootstrap CDNs as the source in the index.ejs file

As a beginner in web development, I was tasked with creating a website using node-js & express during my semester. My team and I decided to use a pre-designed website template that included files like bootstrap.min.js, bootstrap.min.css & jquery-2. ...

jquerynode.jsexpressbootstrap-4ejs

The Art of Positioning Containers in CSS

I am facing some issues with my CSS. In the JSP webpage, I have a container styled with a div that works perfectly. However, when I insert another div tag to style certain elements, those elements end up outside of the container for some reason. Below is ...

htmlcssjsp

Exploring how CSS affects backgrounds in the Google Chrome browser

Having an issue with the background on my website. In Firefox and other browsers, the background appears much lighter and whiter compared to Chrome. This is the CSS code for my background: body {background:#ffffff url(../../images/background.jpg); direct ...

htmlcssgoogle-chromecolors

Stop the submission of a form in jQuery if a file with the same name already exists

Currently, I am utilizing MVC3 and have a form containing a file upload feature. My goal is to prompt the user for confirmation if the uploaded file already exists on the server. To achieve this, I have implemented a jQuery method within the form submit fu ...

asp.netasp.net-mvcasp.net-mvc-3jquery

Issue with Angular ngFor binding. What could be causing this error to occur?

I have a main component called DOCUMENT. This document receives a URL segment and retrieves an array of associated objects from my database. Then, using @Output() documents = new EventEmitter() and an @Input() in a DOCUMENT VIEW component, I loop through t ...

htmlangulartypescript

Wordpress users encountering a Javascript issue with Slider Revolution 5.0

Currently working on a WordPress template in LAMP environment, incorporating Revolution Slider for sliders. I have successfully created the slider and added it to the home page. However, upon checking the home page, the slider is not functioning as expec ...

jquerywordpress