無法創建水平菜單下拉

我正在設計一個頁面，通過查看我的圖片。我被困在菜單欄設計上，因爲我無法弄清楚如何設計菜單欄，就像我在圖像中一樣。它應該與我的形象完全匹配。無法創建水平菜單下拉

這是我的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

無法創建水平菜單下拉

回答

相關問題