The submenu is not aligned directly under its parent item

The sub-menu is not appearing below the parent item as expected. I have tried removing and adding the 'absolute' property, but it doesn't seem to have any effect.

Check out the JS Fiddle for reference: http://jsfiddle.net/42qg5/

HTML Code Snippet:

<div id="menu">
<div class="container">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About SRJC</a>
        </li>
        <li><a href="#">Admission</a>
        </li>
        <li><a href="#">The SR Programmes</a>
        </li>
        <li><a href="#">CCAs</a>
        </li>
        <li><a href="#">Portals</a>

            <ul class="submenu">
                <li><a href="#">ASPIRE</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Staff & Parents</a>
        </li>
    </ul>
</div>
</div>

CSS Code Snippet:

#menu ul li ul li {
   background: #1f2024;
   -webkit-border-radius: 0 0 5px 5px;
   -moz-border-radius: 0 0 5px 5px;
   border-radius: 0 0 5px 5px;
   -webkit-transition: opacity .25s ease .1s;
   -moz-transition: opacity .25s ease .1s;
   -o-transition: opacity .25s ease .1s;
   -ms-transition: opacity .25s ease .1s;
   transition: opacity .25s ease .1s;
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

Answer №1

Check out the latest Fiddle with the updated code.

New Fiddle

#menu ul li ul { 
padding-left: 10px;
padding-right: 10px;
height: auto;
width: 100px;
background-color: #e13393;
border-bottom: 2px solid #fcc402;
display: none;
z-index: 999;
    position:absolute;
    left:0;
    top:30px;
}

#menu li { 
display: inline; 
color: #fff;
    position:relative;
}

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

What is the process for implementing a third-party component in my web application?

After some experimentation, I've discovered that it's necessary to include the link to the css files in the header and then mention the link to the js files before the closing tag. However, I encountered difficulties when trying to use a compone ...

Manipulating the InnerHTML content of a total of 144 individual cells

I am currently developing a tile-based game using tables. Each td cell contains the following code: <td> <div id="image" style="display:none; display: fixed; right: 5; top:2;"><img src="http://thumb7.shutterstock.com/display_pic_with_logo ...

Navigate to a specific section of a webpage with automatic scrolling

I'm developing a Chrome App and incorporating the web view tag, which functions similarly to an iframe. Is there a way to load a webpage inside the web view halfway down the page? I have attempted the following: application.js: $(document).ready(f ...

Is it possible to combine margin auto with a transform on the left simultaneously?

While examining a webpage, I noticed a positioning issue and decided to remove some CSS code to determine the root of the problem. It appears that the navbar has a 1px gap on the left side from the edge of the screen. After removing the last two lines of c ...

"Bootstrap Carousel veers off from center alignment and aligns to the left instead

I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...

Challenges with Internal Styling on Wordpress Sites

Okay. I've been dealing with some internal style issues on my Wordpress website. After dedicating hours to trying to change styles for various elements, I realized that the main html file contained a bunch of internal style sheets that were overridin ...

Enhance your view of the iFrame's CONTENT by zooming in

I'm attempting to magnify (without altering the dimensions) an iFrame containing a SWF file. <iframe src="http://ray.eltania.net/TEST/swf-play/swf/testMotion.swf" width="600px" height="500px" frameBorder="0"></iframe> http://jsfiddle.net ...

How can I pass a variable to withStyles in Material UI?

Here is the code I am currently working with: class StyledInput extends React.Component{ styles = (color, theme) => ({ underline: { borderBottom: `2px solid ${color}`, '&:after': { borderBottom: `2px solid ${col ...

Could we add a touch more to the favicon?

After searching far and wide on this site and Google, I have come up empty-handed in my quest to resolve my favicon dilemmas. Despite delving into various tutorials, the concept of favicons still eludes me. The idea that clearing the cache could be a sol ...

Challenges with Adjusting Background Opacity in CSS

My text has a white background with an opacity of .3, but it's affecting the foreground due to CSS repositioning. Even though the HTML is in a different division, I struggle with certain aspects of CSS and would appreciate guidance from those more exp ...

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

What is the best way to show a table with 100% width in the Chrome browser?

I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were dis ...

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

Show the entire background photo

Below is the CSS code I am currently using within an inline style: <div class="home-hero" style="background-image: url(https://dummyimage.com/300); background-position: 100% center; background-repeat: no-repeat; background-size: cover; height: 100%; wi ...

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

Adding Space Before Bullet Points in HTML: A Quick Guide

Is there a way to add space before bullet points? My requirements are as follows: This is paragraph 1 The first text line The second text line This is paragraph 2 The first text line The second text line I would greatly appreciate any ...

Preventing box shadows from blending together

I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. Below is the CSS code used ...

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific el ...

Aligning elements within a table to ensure consistency with surrounding content

Issue I am working with an html table that includes a particular column whose content can vary in size. This results in rows of varying heights, which is expected. However, the adjacent column to the variable-sized one contains two buttons that consistent ...

The click event will not be triggered if the element is removed by my blur event

My dropdown list is dynamic, with clickable items that trigger actions when clicked. Upon focus, the list displays suggested items When blurred, the list clears its contents The issue arises when blur/focusout events are triggered, causing my element to ...