在子菜单

时间:2016-05-18 15:18:24

标签: html css

我只想在子菜单中在线显示2个元素,但无法看到我出错的地方。

在下面的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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

display:block

中删除#submenuWrapper ul a

#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>