AndrewG

I tried it from the web site with Safari 9.0.2 and it did not work.

I didn't mean to bash W3schools. I made a mistake putting 2 separate things in one post. Ignore the code, the first question is the important one.

I have read the tutorial on CSS navigation bar. It really helped me to understand it, but the example with a dropdown only has one level. I would like to know how to create a second layer. In other words if you hovered on Dropdown>Link 1 in the example another menu would show.

I also noted that in the example the dropdown can only appear at the end. This is because it is not inside <li></li>. Surrounding it with list item tags allows you to put it anywhere in the navbar.

<ul>
<li><a class="active" href="#home">Home</a></li>
<li>
<div class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
<li><a href="#news">News</a></li>
</ul>