CSS Dropdown UL LI A

Question

Been awhile since I've used CSS, just need some help.

I'm trying to make the height of the main 'Home' bar 25% of the screen. Although I think it's being effected by some sortof alignment issue.

Here's the link to the source code

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

Wow, thanks for the helpful feedback guys! I edited the code and I still have some more questions/errors and fixes that you may be able to help with.

Any ideas why the Home menu bar isn't the width of the screen? (the colors are just for identification purposes) Also is there any way of making menu bars 1, 2 and 3 visible simultaneously?

Answer 1

试试这个： #primary_nav_wrap {height: 25%;}

Answer 2

If you want the height to be 25%, then:

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

Answer 3

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

Here is how you set the height to 25% no matter the screen size, please take note i have only set the height and put the "main" link there, you weren't precise about how you want the whole nav to look later on. Either way, the height will absoutelly be 25% this way, no matter what:-)

.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;}

Answer 4

html:

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

css

div {
  height: 100vh;
}

or

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

and finish

nav {
  height: 25%;
}

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