Distinct vertical menus with varying widths but sharing the same CSS code for the submenus

How can I create a vertical menu bar with submenus on the right side? The first submenu appears correctly, but the second one is narrower than the first. It seems like they have the same code, yet they look different.

Below is the HTML code:

<div class="left_col">
    <div class="menue_left">
        <div class="menu">
        <ul class="ja">
            <li class="ja" id="Welcome"><a href="'.WB_URL.'/index.php">Welcome</a></li>
            <li class="ja SuI" id="SuI"><a href="'.WB_URL.'/Historical/">Service &amp; Info</a>
                <ul class="ja">
                    <li class="ja" id="Historical"><a href="'.WB_URL.'/Historical">Historical</a></li>
                    <li class="ja" id="Hours"><a href="'.WB_URL.'/Hours">Opening Hours</a></li>
                    <li class="ja" id="Offer"><a href="'.WB_URL.'/Offer">Offer</a></li>
                    <li class="ja" id="User-Rules"><a href="'.WB_URL.'/User-Rules">User Rules</a></li>
                    <li class="ja" id="Contact"><a href="'.WB_URL.'/Contact">Contact</a></li>
                </ul>
            </li>
            <li class="ja MuK" id="Media"><a href="'.WB_URL.'/Online-Catalog">Media &amp; Account</a>
                <ul class="ja">
                    <li class="ja" id="Online-Catalog"><a href="'.WB_URL.'/Online-Catalog">Online Catalog</a></li>
                    <li class="ja" id="eBook-Lending"><a href="'.WB_URL.'/eBook-Lending">eBook Lending</a></li>
                </ul>
            </li>
            <li class="ja" id="Legal-Notice"><a href="'.WB_URL.'/Legal-Notice">Legal Notice</a></li>
        </ul>
        </div>
    </div>
</div>

And here is the CSS:

.left_col {
position: relative;
margin: 0;
margin-top: 50px;
width: 242px;
height: 820px;
background: yellow;
}

.menue_left {
position: relative;
width:198px;
height: 195px;
top: 50px;
margin-left: auto;
margin-right: auto;
background: black;
}

.menu {
margin: 0;
padding: 0;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
}

.menu ul {
margin: 0;
padding: 0;
line-height: 40px;
padding: 0;
}

.menu li {
position: relative;
margin: 0;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
padding: 0;
list-style: none;
width: 186px;
width: 200px;
background: #C40012;
z-index: 100;
}

.menu ul li a {
text-align: center;
font-family: "Share", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 16px;
height: 40px;
text-transform: uppercase;
text-decoration: none;
display: block;
color: white;
border: 1px solid white;
z-index: 100;
}

.menu ul ul li a {
border: 1px solid white;
background: #C40012;
z-index: 100;
}

.menu ul li a.ja {
text-decoration: none;
}
(menu ul ul li {
margin-top: 0;
width: 100%;
z-index: 100;
}

.menu ul ul {
position: absolute;
visibility: hidden;
top: 0px;
left: 100%;
z-index: 100;
}

.menu ul li:hover ul {
visibility: visible;
z-index: 100;
}

.menu li:hover {
z-index: 100;
}

.menu a:hover {
color: #333333;
z-index: 100;
}

I eagerly await your feedback!

Warm regards

Ascawath

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

Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working. I attempted to add: document.getElementById("Reload").style.display = "b ...

What is the best way to split strings in an input field?

My task is to create a form with an input field and a dropdown list containing options for Checkbox and Radio. The user should enter text in the input field and select a type from the dropdown. For example: Input field: One, Two, Three Radio The expecte ...

Tips for entering text into the redactor editor with selenium IDE

The redactor editor's HTML structure is as follows: <div class="redactor_text redactor_optional redactor_editor" contenteditable="true" dir="ltr" style="height: 373px;"> <p>dummy text​</p> //This is where the text inputted into ...

Only referring to a CSS class within a particular element

I have defined the following CSS: .grade a{ color: white; } It is working, but maybe too well... Now, I have an HTML structure like this: <li class="grade"> <a><i class="fa fa-star fa-fw"></i></a> My Text < ...

Quiz timer using JavaScript

In my HTML and JavaScript project, I am creating a quiz game where players have 15 seconds to answer each question. To implement this timer feature, I used the following code snippet: <body onload="setTimeout(Timer,15000)"> Implemented in JavaScrip ...

Eliminate the white background from the modal image

I'm facing an issue with an image displayed in a modal. The image has a white background that I want to remove so only the image itself is visible. https://i.stack.imgur.com/CG9Ne.png Here's the code snippet: <div id="myModal" class ...

How to align content in the center horizontally and vertically using HTML and CSS

I'm having trouble centering my content both vertically and horizontally on the page. Can anyone provide assistance? Thank you. <style type = "text/css"> #loginMenu { border:5px solid green; padding:10px 10px 10px 10px; background-color:#FF9; ...

The <HTML> element is just a bit too big for the screen

When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...

Ensuring a button (class) is in active hover mode when the document loads

My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important ...

Creating a responsive design using HTML and CSS to ensure that all elements fit perfectly on any window size or resolution

Currently, my friend and I are collaborating on a mod for the popular game known as Minecraft. My responsibility is to create a website where we can showcase this mod and provide information about its features. The main issue I am encountering is the inab ...

PHP combined with jQTouch

I have a form on an HTML page that is passed to a PHP script. The PHP works fine, but I am facing some issues in displaying the HTML content on the PHP page. When I use <?php echo $message; ?> in the body of the HTML, the variable displays properly. ...

What is the best way to implement JavaScript for loading and removing content based on button clicks on a webpage?

I'm in need of a vanilla JavaScript solution (I know JQuery options exist, but I want to stick to vanilla JS for now)? Currently, I am using a simple page as a testing ground for my ongoing project. The page consists of two buttons that load HTML pag ...

The inclusion of individual CSS files in a TypeScript React project does not have any effect

My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: In the Header.css file, I have defined a class: .mainHeading { color: green; } The ...

What is the process for transforming information from a database into a clickable hyperlink?

My course list includes the following: SE1111 SE2222 SE3333 I want to display this list on my webpage and have it redirect to a page where the course name is saved for future use. Here's what I've tried so far: <div id="join_courses" clas ...

Discrepancies in Video Element Size: Mobile Versus Desktop

Why does the video element have different sizing behavior between mobile and desktop? I noticed on this website that on desktop Chrome, its width is about 35% of the browser while on iPad Chrome it's only about 10% Does anyone know why this is happen ...

I'm feeling a bit lost on how to bring my random quote generator to life

I'm attempting to add animation to my random quote generator by making it look like another card is being flipped on top of the existing one, similar to a deck of cards. With limited coding knowledge, I followed a tutorial and made some adjustments to ...

dotdotdot.js is only functional once the window has been resized

For my website, I am attempting to add an ellipsis to multiline paragraphs that exceed a certain height. I have incorporated the dotdotdot jquery plugin from here. An odd issue arises when the page is refreshed, as the ellipsis does not appear until I res ...

Transform your CSS styles into Material-UI makestyles

I am looking to implement an IconButton with a website preview feature that appears when the user hovers over the help icon. I came across a similar solution using CSS, but I need to convert it to Material UI. Here is the CSS code that needs to be converte ...

Strategies for implementing a minimum height for grid-template-column containers

Here's an issue I'm facing: when the first container has content, the other two containers without content end up being the same height as the first one: Check out this JSFiddle link for reference .grid { padding: 5 ...

Tips for concealing select options after choosing with select picker?

Our establishment features three distinct rooms, each offering three identical options that users can choose from. https://i.sstatic.net/Jx4Me.png To illustrate, if a user named John selects option one in the first room, that same option will be hidden w ...