无法创建水平菜单下拉

我正在设计一个页面，通过查看我的图片。我被困在菜单栏设计上，因为我无法弄清楚如何设计菜单栏，就像我在图像中一样。它应该与我的形象完全匹配。无法创建水平菜单下拉

这是我的jsfiddle，这里是我想要复制的image。

我试图创建水平菜单栏中显示的图像，但不知何故我的菜单根本没有显示。看起来他们隐藏在某个地方。这里是我的HTML代码：

<div class="topnav"> 
    <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png"> 
    <nav> 
     <ul> 
      <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 & 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> 

<div class="header"> <img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"> <img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png"> 
    <h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1> 
</div>

我在这里做什么错？我还需要使用字体aswesome（并且我已经在我的jsfiddle中导入了它的css）和GET COVERED按钮以及Log in | Sign up。

来源

2017-05-30 vader

不确定，但我可以告诉你，即使你让它们显示，你也会在大多数视口上遇到问题，因为你正在为布局使用如此多的绝对像素值。你应该尽可能地使用相对单位。 –

'.dropdown'和'.dropdown-content'都有'display：none'，导致它们不出现。您可能希望查看像[** Bootstrap的导航栏模板**]（https://getbootstrap.com/examples/navbar-fixed-top/）这样的框架。你还会在整个地方使用过多的绝对“顶”和“左”，这会导致严重的响应问题。 –

我的CSS有很多我还没有使用的东西，但我的HTML只有很少的东西。我仍然是初学者，所以仍然在学习东西。有了我的HTML和我的对应的CSS，他们有任何问题吗？如果是的话，你能告诉我这些是什么，以及我们能够解决这些问题的最佳方式是什么。这将帮助我弄清楚很多事情。 – vader

第2个问题是：

.dropdown { 
    display: none; /* get rid of this */ 
}

，你需要你的IMG浮动：左侧。

来源

2017-05-30 03:18:31 wazz

好吧，我尝试过，但一切都是现在干的。看看我更新的[jsfiddle]（https://jsfiddle.net/2nv4dd2w/4/）。我怎样才能正确对齐它们，一旦我点击它们就会显示下面的下拉菜单。不知何故，在我的页面刷新一切都显示，我的意思是所有的下拉元素。我只想向他们展示，如果我点击它们。它的字体和字体也很大，与我在图片中的字体不匹配。 – vader

无法创建水平菜单下拉

回答

相关问题