nicht in der Lage, horizontale Menü Dropdown zu erstellen

Ich arbeite an der Gestaltung einer Seite, indem ich auf das Bild, das ich habe. Ich bin auf der Menüleiste Design fest, wie ich nicht herausfinden kann, wie kann ich die Menüleiste wie ich in meinem Bild haben. Es sollte genau mit dem übereinstimmen, was ich in meinem Bild habe.nicht in der Lage, horizontale Menü Dropdown zu erstellen

Hier ist meine jsfiddle und hier ist meine image, die ich versuche zu replizieren.

Ich habe versucht, horizontale Menüleiste wie in diesem Bild gezeigt, aber irgendwie meine Menüs überhaupt nicht angezeigt werden. Es sieht so aus, als wären sie irgendwo versteckt. Hier ist mein HTML-Code:

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

Was ist los ich mache hier? Auch muss ich Log in | Sign up mit Schriftart aswesome (und ich habe bereits importiert css in meinem jsfiddle) und GET COVERED Taste auch machen.

Quelle

2017-05-30 vader

Nicht sicher, aber ich kann Ihnen sagen, dass selbst wenn Sie sie zeigen, Sie Probleme auf den meisten Viewports haben werden, da Sie so viele absolute Pixelwerte für das Layout verwenden. Sie sollten so viele relative Einheiten wie möglich verwenden. –

Sowohl ".dropdown" als auch ".dropdown-content" haben 'display: none', wodurch sie nicht erscheinen. Vielleicht möchten Sie in ein Framework wie [** Bootstrap's Navbar Template **] (https://getbootstrap.com/examples/navbar-fixed-top/) schauen. Sie verwenden auch eine Fülle von absoluten "Top" und "Left" über den ganzen Ort, was zu schweren Problemen mit der Reaktionsfähigkeit führen wird. –

Meine CSS haben viele Dinge, die ich noch nicht benutze, aber mein HTML hat nur wenige Dinge. Ich bin noch ein Anfänger, also lerne immer noch Dinge. Mit der html, die ich habe und der entsprechenden CSS, die ich habe, haben sie irgendwelche Probleme? Wenn ja, kannst du mir sagen, was das sind und wie wir sie am besten lösen können. Dies wird mir helfen, viele Dinge herauszufinden. – vader

Die ersten 2 Probleme sind:

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

und Sie müssen Ihre img schweben: links.

Quelle

2017-05-30 03:18:31 wazz

Ok, ich habe das versucht, aber jetzt ist alles drunter und drüber. Sehen Sie sich meine aktualisierte [jsfiddle] (https://jsfiddle.net/2nv4dd2w/4/) an. Wie kann ich sie richtig ausrichten und sobald ich auf sie klicke zeigt sie Drop-Down-Menü direkt darunter. Irgendwie auf meiner Seite wird alles angezeigt, ich meine alle Drop-Down-Elemente. Ich möchte sie nur zeigen, wenn ich sie anklicke. Auch seine Schriftart und Schriftgröße sind sehr groß und passen nicht zu dem, was ich in meinem Bild habe. – vader

nicht in der Lage, horizontale Menü Dropdown zu erstellen

Antwort

Verwandte Themen