CSS Dropdown UL LI A

Question

J'ai passé un certain temps à utiliser CSS, j'ai juste besoin d'aide.

J'essaie de faire la hauteur de la barre principale 'Home' 25% de l'écran. Bien que je pense que cela se fasse par un problème d'alignement.

Here's the link to the source code 

http://codepen.io/anon/pen/ZbbNqO?editors=110

Wow, merci pour les gars de retour utiles! J'ai édité le code et j'ai encore d'autres questions/erreurs et corrections que vous pourriez être en mesure d'aider.

Des idées pour lesquelles la barre de menu Accueil n'est pas la largeur de l'écran? (les couleurs sont juste à des fins d'identification) Existe-t-il un moyen de rendre les barres de menu 1, 2 et 3 visibles simultanément?

Answer 1

html:

<div> 
    <nav id="primary_nav_wrap"> 
     ... 
    </nav> 
</div> 

css

div { 
    height: 100vh; 
} 

ou

div { 
    position: absolute; 
    top: 0; bottom:0; right:0; left:0; 
} 

et terminer

nav { 
    height: 25%; 
} 

ul, li, a { 
    height: 100%; 
} 

Answer 2

essayez ceci: #primary_nav_wrap {height: 25%;}

Answer 3

Si vous voulez que la hauteur à 25%, puis:

body { 
    /* ... */ 
    height:100vh; 
} 
#primary_nav_wrap { 
    /* ... */ 
    height: 25% 
} 
#primary_nav_wrap>* { 
    /* ... */ 
    height: 100%; 
} 

Answer 4

http://codepen.io/damianocel/pen/BooevE?editors=110

Voici comment vous définissez la hauteur à 25%, peu importe la taille de l'écran, s'il vous plaît prendre note que j'ai seulement définir la hauteur et mettre le lien "principal" là, vous n'étiez pas précis sur la façon dont vous voulez que toute la nav regarder plus tard. Quoi qu'il en soit, la hauteur sera absoutelly 25% de cette façon, peu importe ce que :-)

.mainwrap{ width:99%;height:500px; display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
-webkit-flex-direction: column; 
-ms-flex-direction: column; 
flex-direction: column; 
-webkit-flex-wrap: wrap; 
-ms-flex-wrap: wrap; 
flex-wrap: wrap; 
-webkit-justify-content: center; 
-ms-flex-pack: center; 
justify-content: center; 
-webkit-align-content: center; 
-ms-flex-line-pack: center; 
align-content: center; 
-webkit-align-items: center; 
-ms-flex-align: center; 
align-items: center;}