Mein Hyperlink-Text erscheint seltsam in meiner Link-Kugel-Liste

Question

Wie Sie im Bild sehen können:

Wenn der Hyperlink-txt in zwei Linien aufgeteilt ist, dann Linie 2 nicht starten unter der oberen Hyperlink-Textposition. Es beginnt nicht an der gleichen Stelle wie Zeile 1. Wie kann Zeile 2 automatisch nach rechts eingerückt werden?

<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 goog</a></li> 
              <li><a href="/ida-global-business-networks">UPS Global Transtup Transtup</a></li> 
            </ul> 
           </div> 
         </div> 
        </div> 
       </li> 
      </ul> 

Her er Css koden:

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

Haben Sie so etwas wie dies wünschen? Ich habe eine neue Klasse Box nur für die Größe Ihrer li Element auch ich styled Ihr Symbol für ul, so sieht es aus wie PS: Ihr Code sieht nicht wie in das Bild, Ihr li Symbol ist der Punkt ●

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="/netv&#230;rk">This is a very goog</a></li> 
 
              <li><a href="/ida-global-business-networks">UPS Global Transtup Transtup</a></li> 
 
            </ul> 
 
           </div> 
 
         </div> 
 
        </div> 
 
      </ul>