Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble with drop down menu in fluid layout

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #169056
    Pie Krust
    Participant

    (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? :(

    #169059
    Paulie_D
    Member

    Here’s one I keep around for reference:

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

    #169392
    Pie Krust
    Participant

    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?

    #169422
    Paulie_D
    Member

    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;  
    
    #169427
    Pie Krust
    Participant

    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. :/

    #170181
    Pie Krust
    Participant

    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). Image and video hosting by TinyPic

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

    #170182
    Paulie_D
    Member

    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?
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.