如何在此导航栏上设置背景不透明度并水平对齐所有内容?

用户1813228

我已经制作了基本的导航栏,但我在对齐所有内容并使背景不透明时遇到了问题,因此文本和图像变得更亮,如 [图片][1] 所示。[小提琴] [2] 已附上。

代码片段

.topnav {
      overflow: hidden;
      background-color: #333;
    }
    
    .topnav ul > li {
      float: left;
      display: block;
      text-align: center;
      padding: 14px 16px;
    }
    
    .topnav a {
      text-decoration: none;
      font-size: 17px;
      color: white;
      display: block;
    }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    /* dropdown menus hidden initially */
    .topnav ul > li > ul {
      display: none;
      width: 200px;
      padding: 0;
      position: absolute;
      background-color: #f76c38;
    }
    .topnav ul > li > ul > li {
      float: left;
      clear: left;
      display: block;
      text-align: left;
    }

J先生

你可以试试:

$(document).ready(function() {
  $(".dropdown > a").click(function() {
    $(this).siblings('.dropdown-content').slideToggle(200);
  });
});
@font-face {
  font-family: AvantGarde Demi;
  src: url(AvantGarde Demi.woff);
}

@font-face {
  font-family: AvantGarde;
  src: url(AvantGarde.woff);
}

@font-face {
  font-family: ITC Avant Garde Gothic;
  src: url(ITC Avant Garde Gothic.woff);
}


/******************For Top Nav****************************/

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav ul > li {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
}

.topnav a {
  text-decoration: none;
  font-size: 17px;
  color: white;
  display: block;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul {
  display: none;
  width: 200px;
  padding: 0;
  position: absolute;
  background-color: #f76c38;
}
.topnav ul > li > ul > li {
  float: left;
  clear: left;
  display: block;
  text-align: left;
}

/******************For Top Nav****************************/



li.dropdown{
  margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
  <nav>
    <ul>
      <li><img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"></li>
      <li class="dropdown">
        <a href="#"><b>PROGRAMS</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>INDIVIDUAL</i></a>
          </li>
          <li><a href="#"><i>CORPORATE</i></a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#"><b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i></a>
        <ul class="dropdown-content">
          <li><a href="#"><i>BE EXTRODINARY</i></a>
          </li>
          <li><a href="#"><i>RISK &amp; REWARD</i></a>
          </li>
          <li><a href="#"><i>BLOG</i></a>
          </li>
          <li><a href="#"><i>OUR STORY</i></a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

请在下面评论,如果你有什么问题。或者如果是解决方案,请标记CHECK标记:)



更新
这是输出
在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

情节:如何设置不同的标记不透明度,但为所有标记保留相同的轮廓颜色?

如何使用Matplotlib设置图形背景颜色的不透明度

如何在不影响标题栏的情况下设置JavaFX窗口/舞台的不透明度?

CSS背景不透明度

如何设置UIImage的不透明度/ alpha?

Sass的背景不透明度没有RGBA

在导航栏上设置CSS不透明度

如何更改背景图像的不透明度?

如何在不更改背景内容的情况下更改背景的不透明度?

以编程方式设置WPF背景不透明度

如何在不影响UICollectionViewCell的不透明度的情况下在UICollectionView背景上设置不透明度?

EditText设置背景不透明度

面积图,如何设置填充不透明度?

如何使用CSS为div的背景图像设置不透明度或降低亮度

有没有办法设置fullScreenCover背景不透明度?

如何随着时间改变背景不透明度?

如何在导航菜单上的悬停上显示灰色不透明度/滤镜

使用插件将所有背景图像的不透明度设置为0

如何为网格背景而不是网格中的控件设置图像的不透明度动画?

设置窗口图像背景的不透明度属性

如何使用Magick ++将具有透明背景的png图像设置为不透明度

所有浏览器的所有必需的不透明度设置?

如何设置跨度背景(而不是文本)的不透明度?

将背景和不透明度设置为按钮,但不影响其内容

如何使用CSS设置背景图像的不透明度?

汉堡菜单打开时如何更改背景内容的不透明度?

如何仅将 CSS 中的背景图像设置为不透明度而不是其他任何内容

如何使用 Swift 将 CAShapeLayer 之外的所有内容设为黑色,不透明度为 50%?

将背景设置为具有 16% 不透明度的 div