position relative, position absolute…. arghhhhhhh HELP

  • Jay

    (@phyrax)


    14 years, 6 months 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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Marventus

    (@marventus)

    14 years, 6 months 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.

    Marventus

    (@marventus)

    14 years, 6 months 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;
}

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘position relative, position absolute…. arghhhhhhh HELP’ is closed to new replies.