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

Wordpress articles refuse to appear side by side

I've been at it for hours now, trying to solve this issue with no luck. I have a Wordpress loop on my homepage that displays post thumbnails vertically, but I want them to appear in sets of three images before starting a new line. Here's the cod ...

phpcsswordpress

Utilizing HTML to call a function and fetching data from AngularJS

I've been struggling to retrieve the value after calling a function in my HTML file. Despite trying various methods after conducting research, I have not achieved success yet. Take a look at the code below: HTML: <div class="form-group"> & ...

javascripthtmlangularjs

Utilizing a function within a span element

Can anyone help me figure out what I'm doing wrong while trying to toggle between a span and an input text field using the on function? If you want to take a look, I've created a fiddle for it here User Interface <div> <span >My va ...

javascriptjqueryhtml

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

I am working on a page with several input boxes that need to be flagged for certain criteria. <div class="form-group"> <label class="d-block">Allowance Type</label> <div class="input-group"> ...

csstwitter-bootstrapangular

Using Ajax to invoke a C# webmethod

I'm trying to call a webmethod defined in this specific class <%@ WebService Language="C#" Class="emt7anReyady.myService" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Linq; usi ...

c#javascriptjqueryasp.netajax

What is the best way to retrieve the targeted style directly from CSS, rather than relying on the computed style of the element?

Although similar questions have been posed before, such as this one, I haven't found a working solution. Is there a way for me to retrieve the width attribute value from a CSS class and then write it to a div? I'm looking to access the exact va ...

jquerycss

What is the reason for background images not loading when using `display: none`?

I'm really struggling to understand this puzzle: When the page loads, will mypic.jpg be downloaded by the browser? #test1 { display: none; } #test2 { background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pic ...

htmlcss

Article discussing the Facebook like button

I've recently incorporated Facebook like buttons into the articles on my online store. It's great because when someone shares a post about a product or article, it shows up on their wall. Users receive notifications on Facebook when someone else ...

phphtmlfacebookfacebook-graph-api

Tips for dynamically filling HTML content with Ajax calls

I'm currently in the process of creating a website for my semester project, and I need to dynamically populate HTML content from an AJAX response. The data I'm receiving is related to posts from a database, but I specifically need to display 5 jo ...

jqueryhtmlajax

Show a preview of an image in an HTML document

How can I display an image after uploading it? I attempted to use the following code, but it didn't work: onFileSuccess: function(file, response) { var json = new Hash(JSON.decode(response, true) || {}); if (json.get('status& ...

phpjqueryhtmljsonajax

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

htmlangularangular2-template

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

htmlcsspaddingmarginhtml-lists

Guide on how to use JavaScript to make an HTML5 input field mandatory

I am facing an issue with setting input fields as required based on radio button selection in a form. Initially, all fields should have required=false, but I'm unable to achieve this. No matter what value I assign to the required attribute, it always ...

javascripthtmlrequired

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off

<!DOCTYPE html> <html> <head> <style> body { background-color: #7a64fa; } .container { background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

htmlcss

Toggle visibility (individually duplicating) one thousand sentences while maintaining optimal browser and host performance

I have created JQuery scripts to toggle the display of future sentences on my page (approximately 1000 duplicates) and I am seeking the most efficient method (for browser/host) to accomplish this task. Here are two functional solutions that I have already ...

javascriptjqueryperformanceduplicatesclone

Adjusting the starting position of text within an HTML <li> element

I am currently in the process of designing a webpage layout with three columns. I have a specific vision for how I want the text to align within these columns but I am unsure of how to achieve it. Is there a way to make the text start at an exact position, ...

htmlcsshtml-lists

JQuery Polaroid Gallery Viewer

Hey there, I could use a bit of assistance. While I have a natural knack for design, coding isn't exactly my strong suit. I've been exploring this jquery plugin to incorporate some dynamic elements into my website. You can find the source link h ...

jquery

Learn how to center content and stretch a column using Vuetify frameworks

Looking for a layout with 2 columns of equal height and centered content vertically? Here's how to achieve it using Vuetify! Check out the code snippet below: <div id="app"> <v-app> <v-row align="center"> ...

htmlcssvue.jsvuetify.js

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

javascripthtmlcss

I kindly request your assistance in resolving the issues with the append() and empty

Here is some code I've been working on: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ ...

javascriptjqueryhtml