How to Make a Pure CSS Based Dropdown Menu

html,body {  height: 100%;  width: 100%;  background: #FFF;}
* {  margin: 0;  padding: 0;  box-sizing:border-box;}
p {  padding: 1.6em 0 0;}
.pretendthisisthebody {  padding: 50px 10px 0;}
#hideholder {  display: none;}
.radionav {  position: absolute;  top: 0;  left: 0;  background: #f8f8f8;  width: 100%;}
.radionav>div {  text-align: center;  text-transform: uppercase;}
.radionav div,.radionav a {  color: #505050;  display: block;  padding: 10px;  width: 100%;  cursor: pointer;  text-decoration: none;  transition: 0.1s all ease-in-out;}
.radionav li:hover>div{  background: #cc0000;  color: #fff;}
.radionav ul {  list-style-type: none;  background: #f8f8f8;}
.radionav ul ul a {  padding-left: 30px;}
.radionav input,.radionav .closer,.radionav ul,.radionav input:checked ~ .opener {  display: none;}
.radionav:hover>ul,.radionav li:hover>ul {  display: block;}
.radionav div::after {  content: " +";}
@media all and (min-width: 481px) {  .radionav>div {    display: none !important;  }  .radionav>ul  {    display: block !important;  }  .radionav>ul>li {    display: inline-block;  }  .radionav a,  .radionav div {    width: auto;  }  .radionav li {    position: relative;  }  .radionav a:hover {    background: #cc0000;    color: #fff;  }  .radionav ul ul {    position: absolute;    top: 100%;    left: 0;  }  .radionav ul ul li {    display: block;    min-width: 100%;  }  .radionav ul ul a {    padding-left: 10px;    white-space: nowrap;  }  .radionav li:hover>ul {    display: block;  }  .radionav div::after {    content: "";  }}

<div class="pretendthisisthebody">  <nav class="radionav">    <div>Menu</div>    <ul>      <li><a href="#">Menu item 0</a></li>      <li>        <div>Menu item 1</div>        <ul>          <li><a href="#">Just a link</a></li>          <li><a href="#">Just a longer link</a></li>          <li><a href="#">Just a link</a></li>        </ul>      </li>      <li><a href="#">Menu item 2</a></li>      <li><a href="#">Menu item 3</a></li>      <li>        <div>Menu item 4</div>        <ul>          <li><a href="#">Just a link</a></li>          <li><a href="#">Just a longer link</a></li>          <li><a href="#fail">Just a link</a></li>        </ul>      </li>      <li><a href="#">Menu item 5</a></li>    </ul>  </nav>
  <h1>Clicking in the body outside the menu will hide it</h1>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam suscipit. Vivamus ac mi tellus. Donec vulputate sem eu justo ornare, at mattis augue tempor. Nullam fringilla odio lobortis bibendum lobortis. Fusce condimentum ultricies    nulla, non posuere sem vestibulum nec. Duis rhoncus velit lobortis odio interdum, quis aliquam ex dapibus. Quisque hendrerit pellentesque turpis non pretium. Nam ante metus, tempus quis tortor lacinia, efficitur ullamcorper erat. Sed at aliquet    nisi, ac congue massa.</p>  <p>Mauris est odio, tempor in ex ac, cursus iaculis ex. Etiam eu dapibus dolor. Quisque sodales mollis neque fringilla maximus. Praesent malesuada vitae elit eu congue. Mauris fringilla maximus arcu sit amet tempor. Nam sagittis lectus massa, eu viverra    enim congue a. Nunc ultrices sapien nec enim auctor, ac placerat velit posuere. Donec velit ex, consectetur vitae sapien eget, eleifend maximus sem. Sed placerat nibh mi, eget fermentum justo ultrices nec.</p></div>

Drop-down menu that opens up/upward with pure css

Add bottom:100% to your #menu:hover ul li:hover ul rule

Demo 1

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%; /* added this attribute */
}

Or better yet to prevent the submenus from having the same effect, just add this rule

Demo 2

#menu>ul>li:hover>ul { 
    bottom:100%;
}

Demo 3

source: http://jsfiddle.net/W5FWW/4/

And to get back the border you can add the following attribute

#menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}

How to make pure CSS dropdown menu appear with a fade in/slowly

You should use CSS3 Animations, although they aren't supported in all browsers such as <=IE9, this is exactly what they were made for. You may want to try jQuery for older browsers.

Workign demo JSFiddle

li:hover > ul {
    display: block;
    opacity: 0;
    z-index: 98;
    position: absolute;
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Related Topics