WordPress.org

Ready to get started?Download WordPress

Forums

position relative, position absolute.... arghhhhhhh HELP (3 posts)

  1. Jerry
    Member
    Posted 2 years ago #

    Okay I've been playing with this code for some time, literally a few days, and for the life of me, I can't fix this guys navigation. The thing is, I'm not to educated on css positioning. I can't figure out why when I change a UL to position: relative, it's parent LI randomly changes width, once I set the width, then it breaks.... I'm amazingly lost here. I've tried a ton of things and can't get nothing to work right.

    I'm not asking someone to solve the problem for me, I'm only asking for an explanation as to why the code isn't working correctly. This positioning stuff is killing me. I have spent literally so much time on this freggin positioning stuff that I could have used superfish already..... someone help, I'm desperate. I really don't wanna have to build a new walker function :(

    I've wrote some HTML to mimic the html wp_nav_menu settings I've used, have a look.
    The code: http://pastebin.com/bBQ6nG7s

  2. Marventus
    Member
    Posted 2 years ago #

    Hi,

    I have to step out for a while, but I'll take a look later tonight.
    In the mean time, some pointers about absolute positioning. When you set a div or any other element to position:aboslute, what you are doing is positioning absolutely but in relation to the upmost element with a relative position. If such element does not exist, then the reference is the entire length and height of the screen.
    So what you should try to do is set your level 1 list-items to position:relative, and then your sub-menu to position:absolute, left:0, top:0 and the submenu should be aligned with the
    <li> that contains it.
    If you want, you can post a link to the site in question so I can see it in action.

  3. Marventus
    Member
    Posted 2 years ago #

    Also, you might want to assign a width to the submenu and set it to display:none on page load so it is invisible, and display it when hovering over the parent li:

    ul li ul {
    display:none;
    width:200px;
    }
    
    ul li:hover ul {
    display:block;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.