Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down menu shifting

    Hi there, I'm new to html and css so I apologise in advance if its something really obvious that I'm missing here.

    Basically, I have this nav bar


    Media and Event are supposed to have drop downs, but when you hover over them, the drop down bit appears in the wrong place and the whole things moves about like so
    Hovering over Media

    Hovering over Event


    Here is the code
    Code:
    <ul style="width:580px">
        <li style="display:inline"><a href="#">Home</a></li>
        <li style="display:inline"><a href="#">About</a></li>
        <li class="headlink" style="display:inline"><a href="#">Media</a>
            <ul>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Film</a></li>
                <li><a href="#">Radio</a></li>
            </ul>
        </li>
        <li class="headlink" style="display:inline"><a href="#">Event</a>
            <ul>
                <li><a href="#">What's On</a></li>
                <li><a href="#">Schedule</a></li>
            </ul>
        </li>
    </ul>
    Code:
    li.headlink ul { 
    	display: none; 
    }
    
    li.headlink:hover > ul { 
    	display: block; 
    }
    Can anyone help me out?

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    Have a look at this tutorial: Make a Drop-Down/Fly-Out Menu with CSS.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked great, thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •