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 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS-only dropdown menu... can't get the positioning right

    Hi

    I'm trying to create a simple dropdown menu from my navigation, but I can't seem to get the positioning right.

    I'm using two nested lists, inside a div, like so, and would like the inner list to appear underneath the relevant menu item (the <li> which it's nested in)
    PHP Code:
        <div id="navigation">
            <
    ul>
                <
    li><span class="nav-colour-1"><a href="">Home</a></span></li>
                <
    li><span class="nav-colour-2"><a href="">About</a></span></li>
                <
    li><span class="nav-colour-3"><a href="">Services</a></span>
                                <
    ul>
                    <
    li><a href="">Something</a></li>
                    <
    li><a href="">Whatever</a></li>
                    <
    li><a href="">Another</a></li>
                                </
    ul>                           
                            </
    li>
                <
    li><span class="nav-colour-4"><a href="">Products</a></span></li>
                <
    li><span class="nav-colour-5"><a href="">Customers</a></span></li>
                <
    li><span class="nav-colour-6"><a href="">Contact</a></span></li>
            </
    ul>
        </
    div
    This is the existing CSS (with fonts etc stripped out) before adding the menu


    PHP Code:
    #navigation {
        
    height:38px;
        
    overflow:hidden;       
    }

        
    #navigation ul {
            
    list-style:none;
            
    margin5px auto;
                    
    padding0px;                
        }

        
    #navigation ul li {
            
    display:inline;
                    
    padding0px;
        }             
            
            
    #navigation ul li a{
            
    display:block;
                    
    padding5px 37.4px;
                    
    floatleft;
        } 
    And I was trying to use something like the following to add the mouseover

    PHP Code:
                    /*----------------------
                    Drop Down Menus
                    -----------------------*/
                    #navigation ul ul {
                        
    displaynone;
                        
                    }
                    
    #navigation ul li:hover > ul {
                    
    displayblock;                        
                            
    positionabsolute;
                } 
    If I use a position: relative; the sub menu items just push the rest of the menu out of the way
    If I use position: absolute; the menu appears below the main menu, but aligned to the left of the main menu rather than under the specific menu item

    Is there something obvious I'm missing, or is it just to do with the way my existing menu works?

    Thanks

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    You need to add position:relative to the parent li for the submenu:

    Code:
        #navigation ul li {
            display:inline;
            padding: 0px;
            position:relative:
        }
    and then set the top value for #navigation ul ul
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    You need to add position:relative to the parent li for the submenu:

    Code:
        #navigation ul li {
            display:inline;
            padding: 0px;
            position:relative:
        }
    and then set the top value for #navigation ul ul
    Perfect, thanks!

    I actually ended up positioning the child li relative by mistake (I hadn't even made the CSS for the child li originally, which I think may have been the mistake), but the end result was the same. The top value then sorted out the alignment

    Thanks for your help


  •  

    Posting Permissions

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