Forums

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

Home Forums CSS Drop-down-menu & top nav-bar problems

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #34647
    tobeeornot
    Member

    Hi,

    I am having some problems with my navigation bar, and am hoping for some suggestions to fix.

    http://jsfiddle.net/tobeeornot/7q6J2/
    http://jsfiddle.net/tobeeornot/7q6J2/embedded/result/

    Problems are:
    1. I am unable to stretch the grey padding across the top of the horizontal nav bar so it reaches the end. If I change the padding by even a pixel the last heading (blog) drops to the next line.
    (Apologies but you can’ see the black background in jsfiddle – not sure why – but I need to stretch the grey background padding on the top nav bar approx 5px)

    2. The drop-down menu appears to go underneath some of the following elements and I am not sure why or how to fix.

    Any feedback would be great.

    The drop down is based on the code provided by CSS-tricks: https://css-tricks.com/2282-simple-jquery-dropdowns/

    #88602
    tobeeornot
    Member

    c’mon guys. a little help please :)

    #88669
    tobeeornot
    Member

    Problem is solved – thanks to the efforts of Chris Burton.

    1. ul.dropdown li:last-child {padding-right: 20px;} stretches the padding on the last header to the right to cover gap

    2. adding z-index: 1; to ul.dropdown li

    Thanks again Chris.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.