Employ the CSS pseudo-element :before within a UL element to generate a vertical line

I'm currently working on a vertical menu with the capability of having submenus. My aim is to include a vertical line using CSS pseudo-element ::before along with border.

The challenge I'm encountering is that the CSS is applying to the entire menu instead of the specific submenu I intended.

I suspect the issue may be related to the use of position: absolute;, however, removing it results in the border not appearing at all.

You can view the code below and observe the problem in this JsFiddle.

<ul id="test-ul">
    <li><a>one</a></li>
    <li>
        <a>two</a>
        <ul class="submenu">
            <li><a>sub one</a></li>
            <li><a>sub two</a></li>
            <li><a>sub three</a></li>
        </ul>
    </li>
    <li><a>three</a></li>
    <li><a>four</a></li>
    <li><a>five</a></li>
</ul>

<style>
    /* reset defaults */
    ul { list-style: none; }

    /* apply style to menu */
    #test-ul {
        background-color: #eee; 
        border-color: #ccc;
        position: absolute;
    }

    /* style links */
    #test-ul > li a {
        color: #2b7dbc;
        border-top-color: #e4e4e4;
        background-color: #fff;
        display: block;
        padding: 7px 0 9px 20px;
        border-top-width: 1px;
        border-top-style: dotted;
    }

    /* utilize CSS3 technique to display a vertical border on the left of each submenu item */
    #test-ul > li > ul::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        left: 18px;
        top: 0;
        bottom: 0;
        border: 1px dotted;
        border-width: 0 0 0 1px;
    }
</style>

Answer №1

To implement a dropdown menu on your website, apply the CSS property position: relative; to the .submenu class.

.submenu{
    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

Remove the empty space between lines of images

Is there a way to remove the horizontal and vertical space between the squares? <div class="first"> <ul> <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li> <li><img src="http://dummyimage ...

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

If attribute selectors were universally supported by all browsers, we could effortlessly implement the following styling: input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } input[type='radio'] { margin:0 ...

Having issues with the CSS dropdown menu not activating when hovering

I am facing an issue with a simple menu that includes a dropdown feature upon hovering. The code works perfectly fine in Fiddle, however, it fails to work when running the entire page locally on IE. Can someone please assist me? (here's my code at fi ...

What is the best way to connect to a specific part of a webpage that functions properly on Safari?

On my website, I have a testimonials page with a featured testimonial on the homepage that has a "Read More" option. When users click on this link, I want them to be taken directly to the testimonials page and to the specific section where that particular ...

Applying ngClass to handle positive and negative numbers and adjust color in Ionic/Capacitor

I have data from my API that includes price and percentage data. I want to display negative numbers in red, and zero or positive numbers in green. After exploring Angular documentation, I found that ngStyle and ngClass can be used for this purpose. I chose ...

Enhancing Page Content Dynamism: Making Elements Static

I have a div element that I want to align on the right side of the screen, but the problem is that it doesn't adjust its position as the content dynamically expands and exceeds the width of the page. Despite conducting extensive research, I haven&apos ...

Customize the color of a Bootstrap btn-group

Is there a way to modify the background color of the active or selected button within a button group? <div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" c ...

What is the best way to reference the className within nested SCSS when working with Next.js and React.js?

I am working on customizing a navbar that includes a hamburger button. My goal is to change the style, specifically the bar color and the appearance of the hamburger button, upon tapping. I have already attempted using &:active and .activeBar in the SCSS f ...

How can I modify the color of JavaFX text using CSS?

Looking to jazz up my JavaFX application with some custom CSS styling. Managed to link a stylesheet to my app using the following code: //Java code FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml")); Scene sce ...

Improve the Popup to seamlessly elevate

In my project, I have implemented a pop-up dialog box that rises up from the left bottom corner as the user scrolls down the page. You can view it live at this link- However, I am facing an issue where the initial lift up of the dialog box is not smooth, ...

Incorporating @font-face webfonts into a Jekyll project

I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters w ...

Tips for customizing the appearance of a specific cell in the first column of a Material UI table

Currently, I am modifying the material ui table found in this codesandbox link. My goal is to adjust the style of the first column's cell in the table when it is selected to match the image provided below. https://i.sstatic.net/DGubN.png It seems lik ...

Utilizing PHP to create an interactive website

As a novice PHP developer, I took to Google in search of tutorials on creating dynamic PHP websites. What I found was that many tutorials used the $_GET variable to manipulate URLs and make them appear like this: example.com/?page=home example.com/?page= ...

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

As I work on creating a widget to appear at the bottom of webpages, I've encountered a styling issue. The widget's display varies based on whether the webpage includes a specified meta viewport tag or not. <meta name="viewport" content="width ...

Utilize a Material UI GridList to transform images into a captivating background display

Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a ba ...

Discovering data in individual tr elements within a table with jQuery by utilizing .text()

I'm currently working on a project where I need to separate the three table rows within a dynamically generated table. My goal is to have jQuery treat each row individually in order to extract specific values like price and SKU. You can see an example ...

Tables are being tampered with by Chrome

I'm facing an issue where my website appears fine in FireFox (screenshot), but the tables get messed up in Chrome (screenshot). I've gone through my html and css validation and tried various solutions, but I'm completely lost on how to ...

The Jquery image on.load event seems to only function properly after performing a manual hard refresh of

Looking for a solution to replace loading text with a button only after the image has loaded onto the page. Utilizing on.load as follows: $('img.house').on('load', function() { $('.loading').hide(); $('# ...

What is the correct way to make an image adjust to changes in a browser's size?

I'm in a bit of a quandary: How can I ensure that an image resizes properly based on viewport size? So, here's the challenge - I have an image that is 400 pixels wide and 400 pixels tall. My aim is for it to occupy only 90% of the width of the v ...

How about having one row with five divs of equal width, each with a margin-right of 20px?

Is there a way to achieve 5 floating divs on one row with a 20px margin-right between each, except for the last-child? This is the desired structure: <div class="f-item pull-left">1</div> <div class="f-item pull-left">2</div> < ...