The appearance of my hyperlink-text seems unusual within my list of linked bullets

Observing the image:

https://i.sstatic.net/uSezX.png

In the scenario where the hyperlink text is split into two lines, the second line does not align with the starting position of the first line. How can we automatically indent the second line to the right?

<ul class="nav navbar-nav navbar-left collapse navbar-collapse mega" id="navbar-collapse3">
                <li>
                    <div class="mega-menu">
                        <div class="row">
                                <div class="col-sm-3">
                                    <ul>
                                            <li><a href="/netv&#230;rk">This is a very good example</a></li>
                                            <li><a href="/ida-global-business-networks">UPS Global Transtup Transtup</a></li>
                                    </ul>
                                </div>
                        </div>
                    </div>
                </li>
            </ul>

This is the CSS code:

nav.navbar .navbar-nav.mega .mega-menu li a {
    color: #d9d9d9;
}

nav.navbar .navbar-nav.mega .mega-menu li a {
    font-size: 16px;
    font-weight: 400;
}

a {
    color: #fd7339;
    text-decoration: none;
    background-color: transparent;
}


nav.navbar .navbar-nav.mega .mega-menu li:before {
    content: "\00BB";
    padding-right: 5px;
}

*, *:hover, *:active {
    outline: 0 none;
}

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


nav.navbar .navbar-nav.mega .mega-menu ul {
    list-style: none;
    padding-left: 0;
}

ul ul, ol ul, ul ol, ol ol {
    margin-bottom: 0;
}


nav.navbar .navbar-nav.mega .mega-menu {
    background-color: #454545;
    width: 1000px;
    min-height: 325px;
    left: -166px;
    z-index: 1;
    position: absolute;
    padding: 20px 50px;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

nav.navbar .navbar-nav.mega .mega-menu {
    width: 895px;
}



nav.navbar .navbar-nav.mega .mega-menu {
    background-color: #454545;
    width: 1000px;
    min-height: 325px;
    left: -166px;
    z-index: 1;
    position: absolute;
    padding: 20px 50px;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

Answer №1

Are you interested in something similar to this? I have created a new class called "box" specifically for the size of your li element, and I have customized the styling of your ul symbol so that it resembles the one in the image.

nav.navbar .navbar-nav.mega .mega-menu li a {
    color: #d9d9d9;
}

nav.navbar .navbar-nav.mega .mega-menu li a {
    font-size: 16px;
    font-weight: 400;
}

a {
    color: #fd7339;
    text-decoration: none;
    background-color: transparent;
}


nav.navbar .navbar-nav.mega .mega-menu li:before {
    content: "\00BB";
    padding-right: 5px;
}

*, *:hover, *:active {
    outline: 0 none;
}

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


nav.navbar .navbar-nav.mega .mega-menu ul {
    list-style: none;
    padding-left: 0;
}
.box{
  width:200px;
  height:50px;
}
ul ul, ol ul, ul ol, ol ol {
    margin-bottom: 0;
}
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "»";
  margin:auto;
  padding-right: 5px;
  background-color:rgba(0,0,0,0.4);
}

nav.navbar .navbar-nav.mega .mega-menu {
    background-color: #454545;
    width: 1000px;
    min-height: 325px;
    left: -166px;
    z-index: 1;
    position: absolute;
    padding: 20px 50px;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

nav.navbar .navbar-nav.mega .mega-menu {
    width: 895px;
}



nav.navbar .navbar-nav.mega .mega-menu {
    background-color: #454545;
    width: 1000px;
    min-height: 325px;
    left: -166px;
    z-index: 1;
    position: absolute;
    padding: 20px 50px;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
<ul class="nav navbar-nav navbar-left collapse navbar-collapse mega" id="navbar-collapse3">
                    <div class="mega-menu">
                        <div class="row">
                                <div class="col-sm-3 box">
                                    <ul>
                                            <li><a href="/network">This is a very good</a></li>
                                            <li><a href="/ida-global-business-networks">UPS Global Transtup Transtup</a></li>
                                    </ul>
                                </div>
                        </div>
                    </div>
            </ul>

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

How to Customize H1 Font Family in Bootstrap 4

Hey there! I'm trying to figure out how to change the font-family of an H1 element in Bootstrap 4, but I'm having some trouble. I'm pretty new to using Bootstrap so I followed a tutorial on Youtube, but it didn't cover changing the font ...

Having trouble generating an HTML table from JSON data using JavaScript

My attempt to generate a table with data from an external .JSON file using JavaScript is not working as expected. Everything worked fine when the data was hardcoded into the .JS file, but once I tried to fetch it externally using "fetch", the details do no ...

Tips for extracting the src attribute from a dynamically generated iframe

My dilemma stems from a function that generates an iframe with content on my website, which unfortunately I cannot control as it is loaded remotely. The function initially creates: <span id="myspan"></span> Once the JavaScript function fu ...

Implement consistent styling across several elements within a component

const GreenRow = styled.div` background-color: green; ` const RedRow = styled.div` background-color: red; ` const YellowRow = styled.div` background-color: yellow; ` const GreyRow = styled.div` background-color: grey; ` const MyComponent = () => ...

Obtain JSON information from a backend Node.js server and transfer it to the frontend HTML

I am currently facing an issue while trying to access JSON data and display it on the frontend screen. I have exported it in Node.js and attempted to import it into a script tag in HTML, but unfortunately, I am not able to retrieve the data. Is there a sol ...

Using HTML and CSS to stack a DIV on top of another using z-index

I have 3 main layers on my website: 1) The main view with elements inside (#views in jsbin) - BOTTOM LAYER 2) An overlay (with a white background opacity of .8 #overlay in jsbin) - MIDDLE LAYER 3) A context menu (#contextmenu in jsbin) - TOP LAYER Wh ...

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

Issue with overlapping sticky dropdown and sticky navigation in Bootstrap 4

My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. Whil ...

Construct a table featuring nested rows for every parent entry

Table 1 orderid customerName totalCost ---------------------------------- 1 Jonh £200.00 2 Ringo £50 Table 2 orderlineid orderid productName productPrice Quantity ----------------------------------------------- ...

Is there a way to adjust the transparency of specific text when clicking on a different div?

How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this: https://i.sstatic.net/MgbYQ.png I have set the current opacity of the submit message to 0 so it is hidden, but is there a way to change its o ...

Adjust the size of a map on an HTML page after it has

Currently, I am utilizing Angular 2 to create a simple webpage that includes a Google 'my map' displayed within a modal. <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll ...

Tips for preserving CSS styling following a hover event

While working on implementing a Menu control using jQuery and CSS, I encountered the following issue: Here is a live demo that demonstrates my current problem When I hover over 'Menu Item 1', this item successfully changes its style (background ...

What is the best way to display two items side by side from a list of items in HTML?

I have a list of items that are displayed in `webView` with 4 elements per row. However, for `mobileView`, I would like to show only 2 elements in each row. Below is an example from my HTML file: <div class="row my-3 cust-heading" style="margin-left: 3 ...

Should the window be closed, start a new function

Is there a way to trigger a function when a browser tab is closed (including using alt + f4) using JavaScript? ...

Does the removal of elements present a risk of race conditions?

I am just starting to learn JS and HTML. I want to delete an element from the page as soon as it loads. Here's my basic HTML code: <html> <head> </head> <body> <div id="trapParent"><a id="trap ...

Safari iOS does not display any background for Buttons

Encountering an unusual problem with buttons on iOS devices specifically in Safari browser - the background color isn't being applied like it is on Desktop and Android devices. Here are the CSS properties for the button: export const Button = styled.b ...

``Please proceed with the form submission only if it has been verified and

Within my web application, there are several pages that handle submitted data from forms. I would like to prevent the following scenario: A user creates a form on the client side with identical fields to my original form and sends it to the URL responsibl ...

The Bootstrap navigation bar fails to collapse properly

Hey there! I've incorporated Bootstrap into my web application, but I'm encountering an issue with the navigation bar. Check out my code below: <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="cont ...

Show Pictures Tailored for Individual Users

My website is built using a combination of HTML, CSS, and a touch of JavaScript and jQuery. I've decided to go with MySql as my database. Currently, I have a login system in place where users can create their own accounts on the site. However, I&apo ...

When rendering, HTML characters are not translated

My JavaScript code generates the following HTML structure: <div contenteditable="false" tabindex="0" class="ProseMirror"> <p> didn't project a significant increase</p> </div> When rendered in the browser, it shows the cha ...