Incorrect Alignment of CSS Menu Popout

I am currently working on designing a stylish menu that expands to display the available options, but I am encountering challenges with the CSS. Specifically, I am struggling to make the sub-menu pop out from the city name seamlessly.

CSS

ul { margin : 80px 0 0 0; padding: 0;  white-space : nowrap;}

li a { padding-left: 10px; }

li {
    display     : block;
    padding     : 2px 10px 2px 40px;
    margin      : 0 0 15px 0;
    background  : #929292; 
    width       : 0;
    overflow    : hidden;
    cursor      : pointer;
    -webkit-transform: rotate(0deg) translateX(0px); 
    -webkit-transition: all 0.33s linear 0s;
    -moz-transform: rotate(0deg) translateX(0px);
    -moz-transition: all 0.33s linear 0s;
}


li:hover {  
    background : #fff; width: 180px;
    -webkit-transform: rotate(0deg) translateX(0px) translateY(0px); 
    -moz-transform: rotate(0deg) translateX(0px) translateY(0px);
}

HTML

<ul>
    <li>Florence<a href="flo.php">Florence</a></li>
    <li>Tuscumbia<a href="tusc.php">Tuscumbia</a></li>
    <li>Muscle Shoals<a href="ms.php">Muscle Shoals</a></li>
    <li>Sheffield<a href="shef.php">Sheffield</a></li>
</ul>​
htmlcss

Answer №1

One approach, although not the most efficient, is to utilize classes:

<ul>
    <li class="flo">Florence<a href="flo.php">Florence</a></li>
    <li class="tusc">Tuscumbia<a href="tusc.php">Tuscumbia</a></li>
    <li class="ms">Muscle Shoals<a href="ms.php">Muscle Shoals</a></li>
    <li class="shef">Sheffield<a href="shef.php">Sheffield</a></li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​

 .flo { width: 50px; }
 .tusc { width: 60px; }
 .ms { width: 82px; }
 .shef { width: 50px; }

Take a look at this demonstration on fiddle: http://jsfiddle.net/tylergreen/SQGrY/

Answer №2

One possible solution is to wrap the label on the left side in a div with a fixed width:

HTML

<ul class="mainMenu">
    <li>
        <div class="label">Florence</div>
        <ul class="subMenuLevel1">
            <li><a href="flo.php">Florence 1</a></li>
            <li><a href="flo.php">Florence 2</a></li>
            <li><a href="flo.php">Florence 3</a></li>
        </ul>
    </li>

    <li>
        <div class="label">Florence</div>
        <ul class="subMenuLevel1">
            <li><a href="flo.php">Florence 1</a></li>
            <li><a href="flo.php">Florence 2</a></li>
            <li><a href="flo.php">Florence 3</a></li>
            <li><a href="flo.php">Florence 4</a></li>
            <li><a href="flo.php">Florence 5</a></li>
        </ul>
    </li>

    <li>
        <div class="label">Florence</div>
        <ul class="subMenuLevel1">
            <li><a href="flo.php">Florence 1</a></li>
            <li><a href="flo.php">Florence 2</a></li>
        </ul>
    </li>
</ul>​

CSS

body {
    font-family: Arial, san-serif;
}

.mainMenu {
    margin: 80px 0 0 0;
    padding: 0;
}

.mainMenu > li {
    display: block;
    position: relative;
    margin: 0 0 15px 0;
    background: #929292; 
    width: 160px;
    white-space: nowrap;
    list-style-type: none;
    -webkit-transition: background 0.33s linear 0s;
    -moz-transition: background 0.33s linear 0s;
    transition: background 0.33s linear 0s;
}
.mainMenu > li > .label {
    padding: 5px 20px;
    text-align: right;
}

.mainMenu > li:hover {  
    background : #eeeeee; 
}

.subMenuLevel1 {
    position: absolute;
    top: 0px;
    left: 160px;
    width: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background: #929292;
    -webkit-transition: all 0.33s linear 0s;
    -moz-transition: all 0.33s linear 0s;
    transition: all 0.33s linear 0s;
}

.mainMenu > li:hover > .subMenuLevel1 {
    width: 160px;
    background: #eeeeee;
}
.subMenuLevel1 > li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.subMenuLevel1 > li > a {
    display: block;
    padding: 5px 20px;
    color: #000000;
    text-decoration: none;
    -webkit-transition: background 0.33s linear 0s;
    -moz-transition: background 0.33s linear 0s;
    transition: background 0.33s linear 0s;
}
.subMenuLevel1 > li > a:hover {
    background: #dddddd;
}

DEMO

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 best way to include interactive text on an image?

Just starting to learn html and could use some quick guidance. I have this image here: https://i.sstatic.net/kBJEk.png I would like to place clickable text on the image that links to different pages when clicked, similar to this example: https://i.sstatic ...

htmlcss

Develop a fresh class by inheriting from HTMLDivElement and expanding its prototype

My goal is to add a new method to the HTMLDivElement prototype without cluttering the HTMLDivElement itself with my custom methods. This has led me to attempt creating a new class that extends the HTMLDivElement. export class ScrollableElement extends HTML ...

javascripthtmlreactjstypescriptprototype

The makeStyles feature is currently not functioning properly in the latest version of Next.js with Material UI v5

Currently, I am utilizing nextjs along with material ui in my project "@mui/material": "^5.0.1", "@mui/styles": "^5.0.1", Below is the code snippet of my component structure import { AppBar, Toolbar, Typography, Box ...

cssmaterial-uinext.js

Tips for displaying a title within the border of a div

We have a client who is asking for a unique feature on their new website - they want the title to appear within the border of a text area. We need help figuring out how to achieve this using CSS/HTML. Take a look at the effect we are trying to create: htt ...

htmlcssbordertitle

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

I am currently working on a map project that involves adding shapes and locations onto the map and saving it. However, I am encountering an issue with groundoverlay rotation. Even though there is no built-in rotation property in the Google Maps documenta ...

jquerycssgoogle-mapsgoogle-maps-api-3

What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine @import '~bootstrap/dist/css/bootstrap.min.css'; ...

javascriptcsstwitter-bootstrapbootstrap-4choices.js

Tips for removing red borders on required elements or disabling HTML validation

I am on a mission to completely eliminate HTML validation from my project. Although this question suggests that having all inputs inside forms can help, I am using angularjs and do not require a form unless I need to validate all fields in a set. Therefore ...

htmlangularjsvalidation

Adjust the size of iCheck jQuery radio buttons

I have implemented the iCheck Plugin for radio buttons in Angular Directive, but I am facing an issue with resizing the radio button to a smaller size. Does anyone have any suggestions or solutions for this? ...

cssangularjsicheck

The CSS transition feature does not seem to be functioning properly when it comes to displaying

In my Next.js application, I am using a card component with a "read more" link that should expand the card when clicked. To achieve this behavior, I integrated the "react-show-more" library from https://github.com/One-com/react-show-more. I tried to add ...

htmlcssreactjsnext.js

What are the steps to start a ExpressJS server for webpages that are not index.html?

I am exploring how to browse/run/view web pages other than just the index.html file in my public folder, which contains multiple HTML files. I am using ExpressJS and NodeJS for this purpose, but every time I start my server, I can only access the index.htm ...

javascripthtmlnode.jsexpressbackend

The element <li> is not permitted to be a descendant of the <select> element

Encountering an error when using the native attribute in the Select component: <TextField select value={options.length ? value : defaultValue} SelectProps={{ native: true, }}> Utilizing the material UI Textfield component. validateDOMNe ...

htmlreactjsdrop-down-menumaterial-uitextfield

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

Is there a way to toggle the slide effect of one 'div' without affecting another one?

Hey everyone! I am new to jquery and currently working on a project with two div elements that are slidetoggled. The issue I am facing is that when I open or close one div, the other div also moves along with it. I understand what is happening in the back ...

javascriptjqueryhtmlslidetoggle

The mobile website is not adjusting to the viewport size as expected

I'm currently working on a website and experimenting with responsive design. Unfortunately, I'm facing an issue where every mobile browser is not scaling the site properly. Regardless of the browser, the site appears as 1000px or wider. I have at ...

htmlmobileresponsive-design

How can JavaScript be used to rearrange the placement of DOM elements?

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="boxes"> <div class="red" style="width: 300px; height: 300px; color: red"></div> <div class="blue ...

javascripthtmlcss

Struggling to retrieve the tagName attribute when clicking in JavaScript

I am trying to extract the tagName of any element within an iframe when it is clicked. Unfortunately, my JavaScript code is not working as expected. As a beginner in JavaScript, I would appreciate some guidance on where I might be going wrong. <div cl ...

javascripthtml

How can I utilize a PHP variable as the height and width parameters in a CSS style?

After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...

phpcss

Tips for displaying CSS background color on top of an inline style background image

I am facing a dilemma while using Laravel - if I put a background image into my CSS style sheet, I lose my variable. Currently, this is how I have it set up: <div class="gradient"><div class="topback" style="background-image: url('/storage/c ...

htmlcss

What is the best way to show the totals on a calculator screen?

As part of my work, I created a calculator to help potential clients determine their potential savings. Everything seems to be working fine, except for the total fees not appearing for all the boxes. I believe I might be missing the correct process to add ...

javascripthtmlcsscalculator

Using React components to activate a click effect on the parent component

I have a React component called Card that has an onclick function triggered when the card is pressed. However, within this component, there are child elements such as sliders and buttons that perform their own actions. When clicking on these child elements ...

cssreactjs