Trouble with drop down menu in fluid layout

[Pie Krust]

(First time posting, so please bear with me. :/)

I’ve relatively new to the world of website language. I’m trying to design a simple website with fluid layout. But the problem I seem to be having is with the nav menu. The Dropdown menu won’t…drop.

Here’s the chunk of the code I’m stuck on:

http://codepen.io/PieKrust/pen/wDBdE/
Can anyone help? :(

[Paulie_D]

Here’s one I keep around for reference:

http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

[Pie Krust]

Thanks for this. I tried your method, it still doesn’t work for some weird reason.

The dropdown just refuses to show. Any clue what might be wrong?

[Paulie_D]

Without an updated Codepen it’s hard to say precisely what’s wrong but your previous HTML was poorly structured.

You had closed the parent li before the sub-menu ul.

The structure should look a little like..

<nav role='navigation'>
  <ul>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </li>
  </ul>
&lt;/nav&gt;  

[Pie Krust]

Thanks for pointing that out. I’m literally learning HTML and CSS as I go along designing this.

I know my coding can get messy. :/

[Pie Krust]

I actually tweaked your sample and got it working fine on codepen.

http://codepen.io/PieKrust/pen/hwgCE

But when I copy the code over to Dreamweaver, a gap appears next to the dropdown menu (Tested in Safari & Chrome).

Any ideas what has happened from simply copying into Dw that has caused this?

[Paulie_D]

Obviously, we can’t diagnose CSS we can’t see but either there is something else affecting the elements or, perhaps the reset.css* hasn’t been included or perhaps it’s the box-sizing.

• You are using a reset or normalize.css aren’t you?

[Author]

Posts