Menu options moved to the right of the screen

I am encountering a small issue with my dropdown menu that I can't seem to solve.

The first item in the dropdown menu appears correctly, but the second item is slightly shifted to the right. It seems like the margin-right applied to the link may be causing this shift. How can I work around this issue?

This navigation menu is quite simple, setting the position of the dropdown item to absolute and hiding it with overflow:hidden on the parent element. When hovered over, the dropdown menu becomes visible by changing overflow to visible.

You can view the live site here.

CSS

#mainMenu {
    position: relative;
}

#mainMenu ul {
    list-style: none;
    float: right;
    background-color: #FFFFFF;
}

#mainMenu ul li {
    position: relative;
    display: inline;
    float: left;
    /*padding-right: 1.5em;*/
    font-size: 1.2em;
    zoom:1;
    overflow: hidden;
}

#mainMenu>ul>li {
    line-height: 2em;
}

#mainMenu ul li:hover {
    overflow: visible;
}

#mainMenu ul li a {
    float: left;
    text-decoration: none;
    color: black;
    padding: 0 1em;
}

#mainMenu>ul>li:last-child a {
    padding:0.4em 1em 0.4em 1em;
    border-radius:4px;
    background-color: #00b200;
    color: #FFFFFF;
}

#mainMenu ul li a:hover{
    text-decoration: none;
    color: rgb(42, 160, 239);
}

#mainMenu ul ul{
    position: absolute;
    top: 2em;
    left: 60%;
    width: 10em;
    margin-left: -3em;
    height: auto;
    border: solid #CCC;
    border-width: 0 1px 1px;
}

#mainMenu ul ul:first-child{
    padding-top: 2em;
}

#mainMenu ul ul li,
#mainMenu ul ul a {
    display:block;
    float:none;
    border:0;
    box-shadow:none;
    text-align:center;
    font-size: 1em;
    padding: 0.4em;
    text-align: left;
}

#mainMenu ul ul li:first-child {
    border-top:1px solid rgb(72, 147, 196);
}

#mainMenu ul ul li {
    border-top: 1px solid #e9e9e9;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
    background:#F2F6FA;
    color:#333;
}

HTML

 <div id="nav-row">
            <h1>
                <a href="\">
                    Corporate Site
                    <span></span>
                </a>
            </h1>

            <div id="mainMenu">
                <a href="#mainMenu" class="showMenu"></a>
                <a href="#" class="hideMenu"></a>

            <ul>
                <li><a href="About">About</a>
                    <ul>
                        <li class="company"><a href="#">Company Profile</a></li><li class="team">
                        <a href="#">The Team</a></li><li class="linsux">
                        <a href="#">Pricing Packages</a></li>
                    </ul></li>
                <li><a href="Services">Services</a>
                    <ul>
                        <li class="webDesign"><a href="#">Websites</a></li><li class="Emails">
                        <a href="#">Landing Pages</a></li><li class="Logos">
                        <a href="#">Logos</a></li>
                    </ul></li>
                </li>
                <li><a href="Case Studies">Case Studies</a></li><li>
                <a href="Blog">Blog</a></li><li>
                <a href="Contact">Contact</a></li><li>
                <a href="Free Web Analysis">Free Web Analysis</a></li>
            </ul>
            </div>
        </div>

Answer №1

The reason is that you were previously indenting the submenu by a percentage of the parent width, which caused discrepancies. The margin-left: -3em value remains constant.

Consider using the following approach:

left: -10px; /* Aligns the first submenu approximately 10px before the parent LI */
margin-left: 0;

It's unclear why there was initially a 60% indent followed by moving the submenu back with -3em.

Answer №2

Here are a couple of suggestions to consider:

#mainMenu ul ul {
    left: 39% !important;
}

Alternatively, you could try:

#mainMenu ul ul {
    left: 0;
    margin-left: 0;
}

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

Is Bootstrap Hover Class Inadvertently Included Without Cause?

I am in the process of creating a very basic navigation bar. Bootstrap has been incorporated into my project, along with my custom stylesheet. I believe there is only one bootstrap class on my page. Despite adding a customized hover effect, when hovering o ...

SwipeJS experiencing technical difficulties

My Swipe.Js version : "^7.0.2" Today, I attempted to use Swipe.Js and encountered an issue with my import code. import { Swiper, SwiperSlide } from 'swiper/react'; as described on https://swiperjs.com/react#installation. However, when ...

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Is there a way to automatically apply styling to specific phrases on our website by searching for instances of those phrases? For example: <div> This is what you get from <span class="comp">Company Name</span>. We do all kin ...

Using CSS to break or wrap long words in text

I have a div that spans the width of the page. I'm looking to ensure that a very long word in this div breaks and wraps properly, so all the content stays within the screen width and doesn't overflow beyond 100%. Although I've attempted usi ...

What could be causing the image not to appear on the React app?

I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...

Arranging a Vertical Element Within a Rotated Holder

Who would have thought that geometry would come into play when working with CSS? I need help figuring out how to perfectly cover a rotated container with an upright background image. The goal is to hide the rotation on the sides and maintain dynamic contro ...

What could be causing the border-collapse property to be ineffective on my HTML table?

My HTML table has nested tables, but the border collapse property is not working. Despite adding the border-collapse property to both the main table and nested tables, only the outer borders are visible, with no inside borders. <table style="bord ...

White Background Dialog in Angular

I am struggling to change the default white background of my webpage. Is there a way I can use CSS to blur or darken the background instead? I tried applying CSS code but couldn't locate the correct class. I also attempted setting the "hasBackdrop" at ...

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

Ways to incorporate margins into text on PDF pages produced by Puppeteer without altering the background color

I am currently using puppeteer to generate PDFs that contain dynamic content. My goal is to include margins/padding above and below the text on consecutive pages. Unfortunately, when I try to add margins with the property margin: { top: "1cm", bottom: "1 ...

Progress Bars Installation

For more detailed information, visit: https://github.com/rstacruz/nprogress After linking the provided .js and .css files to my main html file, I am instructed to "Simply call start() and done() to control the progress bar." NProgress.start(); NProgress. ...

Having trouble with Flowbite dropdown functionality in Next.js 12.* with Tailwind CSS

Hello, I am a newcomer to Next.js and currently working on a project using Tailwind/Flowbite. I copied and pasted the Flowbite search input with dropdown code from , but unfortunately, the dropdown is not functioning as expected. I have followed the docum ...

Resizable vector graphics with consistent border dimensions

I need a solution that maintains a constant line width while still making the SVG responsive. Here is the desired outcome: https://codepen.io/dudleystorey/pen/wMLBLK The example linked above achieves this using CSS, but I am looking to achieve the same r ...

Styling Radio Buttons and Links in Horizontal Layout Using Bootstrap

Encountering an issue in Bootstrap while attempting to incorporate custom radio buttons and a hyperlink in the same row. It seems that either the hyperlink functions OR the data-toggle feature for radio buttons works, but not both simultaneously, especiall ...

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

How to efficiently center a jQuery Mobile Dialog on the screen using custom dimensions

I designed an app using jQuery Mobile and I'm looking to display a Dialog box when a button is clicked. The Dialog box should be centered on the screen with specified width and height. For reference, you can view the current version on jsfiddle. The ...

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

Can this actually work? Overflow-y set to visible and overflow-x set to scroll/auto

We are facing a challenge within our team that we are struggling to resolve. Our Grid control has been customized by us. When the icon next to the column name is clicked, a pop-up div (referred to as divFilter) appears, allowing for filtering options to be ...

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

Tips for aligning navbar content in the center using Bootstrap

I'm currently working on creating a Bootstrap 4 navbar, but I'm having trouble positioning objects within the navbar. I want to center a search box and place a button on the right, but so far I have not been able to achieve this as the navbar is ...