Unusual positioning of submenus in CSS menus

I'm facing an issue with my menu where the last item "Apps" is supposed to stay in place instead of sliding down.

I'm looking for a CSS-only solution to solve this problem.

Here is my current CSS code:

div.menu{
display: block;
float: left;
width: 10%;
position: absolute;
height: 20%;
min-height: 20%;
margin-right: 0;
margin-left: 0;
margin-top: 5%;
text-align: center;
color: #428bca;
z-index: 0;
}
div.menu ul{
list-style-type: none;
margin-right: 10px;
margin-left: 10px;
padding-left: 0;
padding-right: 0;
}
div.menu ul li{
background-color: #FFF;
width: 100%;
margin-top: 1px;
position: relative;
}
div.menu ul li ul {
display: none;
left:125px;
top:-20px;
float: right;
width: inherit;
height: inherit;
z-index: 1;
position: relative;
}

div.menu ul li ul li {
background: #fff;
}

div.menu ul li:hover ul {
display: block;
}
  div.menu li:hover{
background-color: #ddd;
 }

I'm feeling quite confused at the moment and would greatly appreciate any assistance. I'm using CodeIgniter for this project.

htmlcsscodeignitersubmenu

Answer №1

Perhaps this solution could be beneficial:

div.menu ul li ul {
display: none;
left:100%;
top:0px;
position: absolute;
}

Verify that your HTML code is accurately constructed as well.

Answer №2

It may be challenging to visualize the layout without access to your HTML code. For future reference, consider sharing a code snippet on a platform like JSFiddle. In the meantime, you could explore utilizing the last-child selector and implementing position:fixed to ensure the element remains stationary within the layout.

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

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

javascripthtmlcssangularjs

What could be causing my cross fade to not repeat as intended?

I created a basic background image cross fader using the code found at http://jsfiddle.net/jRDkm/2/. This code was inspired by . However, I'm encountering an issue where the slideshow only repeats once before fading to white. How can I modify the cod ...

jquerycsssliderfade

Having trouble with the jQuery file upload plugin when trying to upload files larger than 5 MB

I successfully incorporated the jQuery file upload plugin into my Codeigniter project to allow users to upload files of any extension. I even managed to increase the upload file size limit to 50 MB. However, I encountered an error when attempting to upload ...

phpjavascriptjquerycodeigniter

What is the best way to create a "comment posting and replying" section on a website using either PHP or Javascript?

I'm currently in the process of developing my own personal website. I believe that incorporating a section for "user comments and replies" would be a great way to enhance my site. I prefer to avoid user email verification. I'd like users to be a ...

javascriptphpjqueryhtml

Having an absolute element can lead to overflow causing a scroll

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { ...

htmlcsscss-positionoverflow

Changing the order on mobile devices in Bootstrap 4: A quick guide

Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the vi ...

htmlcssbootstrap-4

Issue with nav-pill not functioning properly on localhost server set up with XAMPP

<!-- Customized Navigation Pills --> <ul class="nav nav-pills" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">My Home</a> </li> <li class="nav-item ...

htmlangularjstwitter-bootstrapxamppnav-pills

Ensure each checkbox within a list is selected

My dilemma involves an assortment of checkboxes enclosed within LIs and SPANs in an unordered list. To simplify the checking process, I attempted using jQuery to automatically check all boxes when a button positioned above the UL is clicked. However, my ...

jqueryhtml

Changing the cursor on drag operation

Having trouble changing the cursor while dragging an object? I'm struggling to find a solution to change the cursor properly during dragging. My setup involves a React component where I attempted to change the cursor without success. Despite my effor ...

htmlcssreactjs

Ensure that all items are centered while positioning one in the corner

Lately, I've been diving into the world of flexbox and trying out new things. However, there are still some concepts that elude me. My current project involves creating a straightforward layout with three flex items (children). The container is confi ...

htmlcssflexbox

Performing a button click using Selenium

There is a button on the web page, described by the following code snippet: <button onclick="getListRating(1); return false;" class="button is-gray pagination__more">Open</button> I attempted to click on it using the Seleni ...

pythonhtmlcssselenium

What is the method to send an email with an embedded image using C# without the presence of ATT00001.bin file

Currently, I can successfully send emails using SMTP in C# and even include images as LinkedResource. However, the issue arises when recipients receive emails with ATT0000X.bin files attached. How can I prevent these bin files from being included in the em ...

c#htmlsmtpsmtpclient

Tips for maintaining a website within a 960px width while stretching the background on the x-axis

I have enclosed the entire website within a div with the ID container. The CSS styling for the container is as follows: #container { width: 960px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } How ...

htmlcss

Tips for locating an element within pre-processed HTML content

Is there a way to modify this code snippet to target the 'price' element within each 'info_block' instead of displaying the entire 'info_block' content? My ultimate goal is to locate the price within every 'info_block&apo ...

phphtmlxpathdomdocument

The internal style sheet is being overridden by an earlier declared external CSS in the HTML document

Experimenting with the front end of a website using the latest version of bootstrap, 3.0. I am adjusting things by inspecting elements in Firebug, but something strange keeps catching my attention. Even though my <head> is structured like this: < ...

csstwitter-bootstrapstyles

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

javascriptjqueryhtmljsoninternet-explorer

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

I have two questions regarding the implementation of tsParticles in my React application. First question: <Particles id="tsparticles" options={{ background: { color: { value: "black&quo ...

javascriptcssreactjsparticles.js

Guide on extracting data from a JavaScript table using Python

Looking to extract information from a table on this page: . There are a total of 18 pages, but the url remains constant for each page. My usual method involves using BeautifulSoup to scrape data from HTML pages. However, in this case, the required data is ...

javascriptpythonhtmldatatable

Issue with implementing LocomotiveScroll on a sticky element

Working on a personal project, I have been experimenting with Nextjs and locomotive-scroll. I am attempting to use position:sticky; along with data-scroll-sticky, but unfortunately the desired functionality is not working as expected. Here is the code snip ...

cssnext.jsstickysmooth-scrollinglocomotive-scroll

Exploring the functionality of the onblur HTML attribute in conjunction with JavaScript's ability to trigger a

How do the HTML attribute onblur and jQuery event .trigger("blur") interact? Will both events be executed, with JavaScript this.trigger("blur") triggering first before the HTML attribute onblur, or will only one event fire? I am using ...

javascripthtmljqueryjquery-ui