サブメニュー内にインラインで表示要素を表示する

Question

サブメニュー内に2つの要素をインラインで表示するだけで、どこが間違っているのかわかりません。 1行に表示されるはずです1以下JSFiddleにおけるソリューションの上にマウスを移動

：

">許諾ソフトウェア"

ここではFiddle

---

.subsub { 
 
    display: block; 
 
    width: 500px; 
 
} 
 
.subsub a { 
 
    font-size: 12pt !important; 
 
    display: inline-block; 
 
} 
 
.subsub .fa { 
 
    display: inline-block; 
 
    color: #bebebd; 
 
} 
 
.subsub i { 
 
    position: relative; 
 
    padding-top: 10px; 
 
    left: 15px; 
 
}

<div class="subsub"> 
 
    <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#"> LICENSED SOFTWARE</a> 
 
    </li> 
 
</div>

Answer 1

です

01を削除

#submenuWrapper ul { 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
#submenuWrapper ul a { 
 
    font-family: "proxima-nova"; 
 
    font-size: 22px; 
 
    text-transform: none; 
 
    text-decoration: none; 
 
    letter-spacing: 0px; 
 
    font-weight: 700; 
 
    font-style: normal; 
 
    line-height: 1.2em; 
 
    /*display: block; -----> remove this line */ 
 
    color: #bebebd; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
#submenuWrapper ul li { 
 
    position: relative; 
 
    float: left; 
 
    margin-left: 0; 
 
    margin-right: 50px; 
 
    padding: 0; 
 
} 
 

 
#submenuWrapper ul ul { 
 
    display: block; /*display: none; - you can't comment in CSS w // */ 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    padding: 0; 
 
} 
 

 
#submenuWrapper ul ul li { 
 
    float: none; 
 
} 
 

 
#submenuWrapper ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px; 
 
} 
 

 
#submenuWrapper ul li:hover > ul { 
 
    display: inline-block; 
 
} 
 

 
#submenuWrapper a:hover { 
 
    color: #179bce !important; 
 
} 
 

 

 
.subsub{ 
 
    display:block; 
 
    width: 500px; 
 
} 
 

 
.subsub a{ 
 
    font-size:12pt !important; 
 
    display:inline-block; 
 
} 
 

 
.subsub .fa{ 
 
    display:inline-block; 
 
    color:#bebebd; 
 
} 
 

 
.subsub i{ 
 
    position:relative; 
 
    padding-top:10px; 
 
    left:15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="submenuWrapper"> 
 
    <ul> 
 
    <li><a href="#">Solutions</a> 
 
     <ul> 
 
     <div class="subsub"> 
 
      <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#"> LICENSED SOFTWARE</a></li> 
 
     </div> 
 
     </ul> 
 
    </li> 
 
    <li><a style="color: #179bce;" href="/capital-markets-consulting">Consulting</a></li> 
 
    <li><a href="/capital-markets-technologies">Technologies</a></li> 
 
    </ul> 
 
</div>