Need help with development of HTML+CSS3-only dropdown

[RikTelner]

https://jsfiddle.net/fzbx09qL/1/

Having above code. This is as far as I've gotten. I need someone to instruct me on three things.

First off, how do I make sure it appear smoothly? I have transition but it doesn't seem to work, must be other way.
Second, there is some code that I commented out in HTML box. When I add it, the entire "dropdown" breaks. This might be because of links, but in future I'd really need it. Is there a work-around?
Third, it seems this box is a little bit off to the side, is there a way to place it in center relatively to it's parent? Obviously it's there by default, as it leans on left side of it's parent.

[gentlemedia]

You can't transition the display property, so instead you could use opacity: 0 in combination with visibilty: hidden or hide that div off-screen with top: -100% (for example) and on hover you set it to top: 0 (or a bit more so that it will appear underneath).

[ryantroop]

Proper HTML markup says anchor tags cannot be children of anchor tags (basically, which one are you clicking?) which is why the commented out block isnt working.

You will have to make a more complex structure to do what you are trying to do, and will likely require some javascript as well to manage the height of an overflow hidden container (otherwise, using max-height will be slow when calculating the height for you and will look delayed).

[RikTelner]

You can't transition the display property

Yes, I know, that's why I animate opacity.

so instead you could use opacity: 0 in combination with visibilty: hidden

Doesn't work: https://jsfiddle.net/fzbx09qL/4/

or hide that div off-screen with top: -100% (for example) and on hover you set it to top: 0 (or a bit more so that it will appear underneath).

I need it to appear from nothing, not slide from bottom of the website to it's original position.

[gentlemedia]

Yes, I know, that's why I animate opacity.

No, you transition 'all' which includes also the display: none that you change on hover to display: inline-block

Doesn't work: https://jsfiddle.net/fzbx09qL/4/

Again, because of the display property

I need it to appear from nothing, not slide from bottom of the website to it's original position.

I know, just don't transition the top property, but only the opacity.

Thus, don't hide that div with display: none, but just with opacity: 0 and visibilty: hidden.

So you get something like this:

nav div {
  position: absolute;
  top: 100%;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}

nav a:hover div {
  visibility: visible;
  opacity: 1;
}

https://jsfiddle.net/gentlemedia/c16vnhLb/1/

EDIT:

Second, there is some code that I commented out in HTML box. When I add it, the entire "dropdown" breaks. This might be because of links, but in future I'd really need it. Is there a work-around?

If you want links inside that div then, you shoud use another element instead of the anchor tag for the hover.

EDIT2:

Third, it seems this box is a little bit off to the side, is there a way to place it in center relatively to it's parent? Obviously it's there by default, as it leans on left side of it's parent.

https://jsfiddle.net/gentlemedia/c16vnhLb/2/

[RikTelner]

You will have to make a more complex structure to do what you are trying to do, and will likely require some javascript as well to manage the height of an overflow hidden container (otherwise, using max-height will be slow when calculating the height for you and will look delayed).

The problem is, that's a fallback for not having JavaScript. Normally menu will automatically analyse what user wants and redirect him/her there. But some people don't like having fun.

https://jsfiddle.net/gentlemedia/c16vnhLb/2/
https://jsfiddle.net/gentlemedia/c16vnhLb/1/

These two are the same links, just one has "visibility" misspelled :P
Now I understand what you meant, I tried to avoid visibility as I thought that box would be interactable because it took space (just like opacity: 0;).
But now, I need to throw links into there.

I changed some, it's now this: https://jsfiddle.net/c16vnhLb/3/
According to poster sometime above, ryantroop, claimed that I would need more complex structure to obtain links in such dropdown menu. Any suggestion on what I could start building to get links into such thing (and come back crying if it doesn't work)?

[gentlemedia]

My bad... I've pasted the wrong link at EDIT2
https://jsfiddle.net/gentlemedia/c16vnhLb/4/

And indeed visibility doesn't take space.

Any suggestion on what I could start building to get links into such thing

Usually this is how we would mark up a menu with a 1 level submenu

<nav role="navigation">
    <ul>
        <li><a href="page1.html">page one</a></li>
        <li><a href="#" class="submenu">submenu</a>
            <ul>
                <li><a href="page2.html">page two</a></li>
                <li><a href="page3.html">page three</a></li>
            <ul>
        </li>
        <li><a href="page4.html">page four</a></li>
    </ul>
</nav>

And then you would hide the ul tag that holds the submenu items and show it when you hover the a tag with the class submenu.
So something like this, but of course you will need to do a lot more within the CSS to get the main menu items aligned and the submenu where you want it.

.submenu + ul {
    visibility: hidden;
    opacity: 0;
    /* actually you don't need to transition
      * the visibility property.
      * Only the opacity is enough */ 
    transition: opacity .5s;
 }

.submenu:hover + ul {
    visibility: visible;
    opacity: 1;
}

[RikTelner]

I like how I tried before <ul>'s ultimately given up. And you provide 13 lines to make it work exactly as wanted... but yea, I can turn this in the project, thanks.

[gentlemedia]

Great! I've noticed I closed in that example markup an ul tag not properly, but I've got the basics in a pen for you so you can see how and what.
http://codepen.io/gentlemedia/pen/WwMQJz

[role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[role=navigation] > ul > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 1rem;
}

[role=navigation] .submenu + ul {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s;
}

[role=navigation] .submenu:hover + ul,
[role=navigation] .submenu + ul:hover {
  visibility: visible;
  opacity: 1;
}