带CSS和HTML的水平菜单

Question

我正在尝试使用除正确文本之外的图像进行水平菜单，但我无法执行此操作。我已经尝试了很多东西而且我无法解决它。

.topper1 {
  width: 100px;
  height: 50px;
  padding: 10px;
}

.logo {
  height: 75px;
  width: 235px;
  padding-left: 315px;
}

.heading {
  float: right;
}

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

.heading ul a {
  display: block;
  color: blue;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

.heading ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

.heading ul li.current-menu-item {
  background: white;
}

.heading ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  padding: 0
}

.heading ul ul li {
  float: none;
  width: 200px
}

.heading ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

.heading ul ul ul {
  top: 0;
  left: 100%
}

.heading ul li:hover>ul {
  display: block
}

<div class="topper1">
  <div class="logo">
    <a href="#"><img alt="nba.com" src="img/nbacom.png" width="90" height="20">
      <div class="heading">
        <nav id="primary_nav_wrap">
          <ul>
            <li class="current-menu-item"><a href="#">GLOBAL</a></li>
            <li><a href="#">TEAMS</a>
              <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
              </ul>
            </li>
            <li><a href="#">G LEAGUE</a></li>
            <li><a href="#">WNBA</a></li>
            <li><a href="#">NBA STORE</a></li>
          </ul>
        </nav>
      </div>
  </div>
</div>

这是我得到的结果：

如何将其与图像水平放置？

Answer 1

浮动可能是一个痛苦的屁股，所以我建议你改用flexbox。

我还必须稍微改变你的标记。

看看它的样子：

.topper1 {
  height: 50px;
  padding: 10px;
  display: flex;
  align-content: center;
}

.logo {
  height: 75px;
  width: auto;
}

.heading ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0
}

.heading ul a {
  display: block;
  color: blue;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

.heading ul li {
  flex: 1;
  position: relative;
  white-space: nowrap;
  margin: 0;
  padding: 0
}

.heading ul li.current-menu-item {
  background: white;
}

.heading ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  padding: 0
}

.heading ul ul li {
  float: none;
  width: 200px
}

.heading ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

.heading ul ul ul {
  top: 0;
  left: 100%
}

.heading ul li:hover>ul {
  display: block
}

<div class="topper1">
  <div class="logo">
    <a href="#"><img alt="nba.com" src="https://goodlogo.com/images/logos/national_basketball_association_nba_logo_2414.gif" width="90" height="20">
  </div>
    <div class="heading">
      <nav id="primary_nav_wrap">
        <ul>
          <li class="current-menu-item"><a href="#">GLOBAL</a></li>
          <li><a href="#">TEAMS</a>
            <ul>
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li><a href="#">Sub Menu 4</a></li>
              <li><a href="#">Sub Menu 5</a></li>
            </ul>
          </li>
          <li><a href="#">G LEAGUE</a></li>
          <li><a href="#">WNBA</a></li>
          <li><a href="#">NBA STORE</a></li>
        </ul>
      </nav>
    </div>
</div>