Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0

    CSS noob and I need help.


    Hello all. My name is Mark and I just registered.

    I have been trying to make a simple drop down menu on blogger for the past 5-6 hours. I have it started but I can't get my UL to align with the parent. I have tried my best to search google and learn the basic CSS coding to fix the error but I can't figure it out.

    Site: withwingslikeeagles net

    Currently if you hover over 'Forum' you will see 'Test' drop out but it is far to the left. I am trying to that drop down to align with the parent 'Forum'. Once I get this done I will add more.

    I also noticed earlier, with my current CSS code, that when I add a second link under 'Forum' the two links will be aligned next to each other.

    Here is my html:

    <div>
    <ul id='menu'>
    <li><a href='>Home</a></li>
    <li><a href='>Forums</a>
    <ul>
    <li><a href="#">Test</a></li>
    </ul></li>
    <li><a href='>Me</a></li>
    <li><a href='>Philosophy</a></li>
    <li><a href='>How-To</a></li>
    <li><a href='>Trades</a></li>
    <li><a href='</a></li>
    <li><a href='</a></li>
    <li><a href='>Articles</a></li>
    <li><a href='>Reviews</a></li>
    <li><a href=''>Follow</a></li>
    </ul></div>





    Here is my CSS (I put this in Additional CSS. Could that be why I am having the problem?)

    -------------------Drop Down Menu-------------------


    #menu {
    list-style: none;
    padding: 0;
    }


    #menu ul {
    position: absolute;
    display: none;
    list-style: none;
    padding: 0;
    }


    #menu ul li {
    clear: left;
    }


    #menu li:hover ul {
    left: inherit;
    display: block;
    position: absolute;
    width: auto;
    padding: 0;
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    I had to remove all the URLs because I am a new user.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Hi!

    This messed me up when I started using position:absolute as well.

    It will position relative to the first ancestral element that is position: relative or position: absolute; if none are found, it positions relative to the page (which is happening to you.)

    If you add a class to your top-level menu items
    Code:
    <li class="top-level-item">
    Then you can set that to position:relative. It won't affect the display of the item itself, but it will allow the child's position:absolute to "see" it.
    Code:
    .top-level-item {
       position: relative;
    }
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    Thanks for your response. However, my brain is completely fried.

    So when adding the "class to top level menu items" I add that code like this?

    <div>
    <ul id='menu'>
    <li class="top-level-item">
    <li><a href='


    I added the above and posted the CSS coding you listed but I don't see any change.

    Thanks for your help thus far.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Ah, sorry, I meant:

    Code:
    <ul class="navbar">
       <li class="top-level-item">Home</li>
       <li class="top-level-item">Forums
          <ul class="submenu">
             <li class="submenu-item">Test</li>
          </ul>
       </li>
       <li class="top-level-item">Me</li>
    </ul>
    With
    Code:
    .navbar,
    .submenu {
       padding: 0;
       list-style: none;
    }
    
    .top-level-item {
       position:relative;
    }
    
    .submenu {
       display: none;
       position: absolute;
       left: 0;
      z-index: 99999;
    }
    
    .top-level-item:hover .submenu {
       display: block;
    }
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    No change. Can you look over my CSS:

    Code:
    #menu {
    list-style: none;
    padding: 0;
    }
    
    #top-level-item {
       position: relative;
    }
    
    
    #submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    }
    
    #menu ul {
    position: absolute;
    display: none;
    list-style: none;
    padding: 0;
    }
    
    
    #menu ul li {
    clear: left;
    }
    
    
    #menu li:hover ul {
    left: inherit;
    display: block;
    position: absolute;
    width: auto;
    padding: 0;
    }
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Originally Posted by afmarko99
    No change. Can you look over my CSS:
    # is the selector for element IDs. Since IDs need to be unique to a page, I used classes above.

    . is the selector for classes. So you need to use it to prefix class names rather than #.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    I copied the CSS code you provided and used only that. Check my website to see the results.

    I'm sorry for being so new at this.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Originally Posted by afmarko99
    I copied the CSS code you provided and used only that. Check my website to see the results.

    I'm sorry for being so new at this.
    Ah, try removing the
    Code:
    top: 0
    and replacing it with
    Code:
    z-index: 99999;
    The top:0 was a mistake on my part, it made the top of the submenu align with the top of the nav-bar, which isn't what you wanted.

    The large z-index is so that the menu appears on top of other elements, rather than below them.

    (I'll update my other post)
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    It changed it a smidget but still not correct.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    I'm still seeing

    .submenu {
    top: 0;
    }

    instead of

    .submenu {
    z-index: 99999;
    }

    And yes, I cleared my cache. Are you sure you pushed the change live?
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    Yes, it should be live. I just double checked the code.

    I just viewed the source page from my browser and also saw z-index: 99999

    Here it is.

    Code:
    -------------------Drop Down Menu-------------------
    
    
    .navbar,
    .submenu {
       padding: 0;
       list-style: none;
    }
    
    .top-level-item {
       position:relative;
    }
    
    .submenu {
       display: none;
       position: absolute;
       left: 0;
       z-index: 99999;
    }
    
    .top-level-item:hover .submenu {
       display: block;
    }
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Now I'm seeing the z-index, but not the :hover.

    (Is that a direct copy-and-paste from your CSS file?)
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    Yes, It is a direct paste.

    Code:
    .top-level-item:hover .submenu {
       display: block;
    }
    That code is the last thing I see in the CSS form.
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    13
    Rep Power
    0
    I just checked my page source in firefox and that code showed up.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo