how to "horizontalize" a dropdown menu

  • hi everyone,

    I’m about to move my Joomla!-Blog to WordPress (3.0).
    Therefor I created my own theme and tried to make use of the dropdown menu.

    So I copied (hopefully all the necessary) code of the “twenty ten” theme and adapt it to my layout.

    But unfortunately the menu is arranged vertically and the dropdown-submenus appear at the left side.

    How can I make it being displayed horizontally and the submenus really dropping “down”.

    Here’s my blog: bleib-passiv.de

    Thanks so far for being concerned!

    Edit:

    I’ve read the codex, too. But it wouldn’t help me to fix the problem.

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

  • Basically you have a list using html tag “li” and then in CSS for that section (control through div, li, id or whatever) you set the list to:
    display:inline
    that causes the listto display horizontal or “inline”

    [I’m a little bit stupid]
    I can’t see your drop-down menu lol !
    where is it?

    Thread Starter Romanowitsch

    (@romanowitsch)

    @webjunk:

    I don’t get it. I’ve set the list to display horizontal, but it doesn’t do it? Or does “inline” mean “vertical”?

    EDIT: Oh, now I got it. There’s the css-command “inline” missing, right?
    I’ve tried to put it somewhere now, but I can’t figure out, where I have to add the “li”…

    @forunner:

    Maybe it’s a browser problem, but you should see it on top (beneath this picture frame hanging down from the top).

    display : horizontal is not a valid css properties
    display can take some options :
    the most usefull are
    -block(default for your li)
    -inline

    block means …it’s a block…each time you put a block, you go to the next line
    inline tags are always inside a block. you can put multiple inline things on the same line ^^

    (you can use “block-inline” for recent navigators)

    Thread Starter Romanowitsch

    (@romanowitsch)

    display : horizontal is not a valid css properties

    Your completely right. It was missleading when I wrote “I’ve set the li to display horizontal”.

    Now, I tried to add (or change the former “block”) properties “display: inline;” almost everywhere I could imagine. But nothing changed.

    When I add it to the general property:

    ul, li {
list-style: none;
list-style-type: none;
display: inline;
}

    it ruins my layout and still doesn’t change the menu’s appearance.
    Can you figure out, which div id or class I have to target?

    You need to add to your theme’s syle.css (if I have the right section):

    #topnavi li {display: inline; }

    Thread Starter Romanowitsch

    (@romanowitsch)

    hm… that’s strange. My former menu had the div class “top_nav”, but when I copied the code from the TwentyTen theme, I commented the whole “top_nav” properties out, so you shouldn’t have even seen them.

    Was that just a guess or do you really see a div-container named “top_nav”?

    (Anyway, I’ve tried it and it still doesn’t work…)

    To give it a trial, I commmented the whole “access” properties (from the TwentyTen theme) out and set the (former out commented) “top_nav” properties back in and added the display:inline command to it, but that didn’t arrange it horizontally neither.

    I also tried to rename all “access” properties in “top_nav” but also without any gain…

    Something else seems to prevent the “inline” property from working properly.

    Any idea?

    Thread Starter Romanowitsch

    (@romanowitsch)

    Update:

    Now I got the menu itself ordered horizontally. But the submenus still appear on the left hand side…

    Is this a “simple” display:inline-problem, too? Or is there a little more to do?

    Probably same.

    Thread Starter Romanowitsch

    (@romanowitsch)

    @webjunk:

    I tried the inline property, but it only changes the (horizontal/vertical) arrangement of the submenu, but the submenu itself stays on the left of the main menu.

    But I want the submenu to drop down from each main menu link to whom it belongs. This doesn’t seem to be resolvable by adding the display:inline property somewhere.

    Is there any “float:???” or “position:???” property that needs to be added or fixed?

    Try changing the sub ‘li’ or ‘ul’ position style from ‘absolute’ to ‘relative’…I had the same issue and it seemed to fix mine. However, I am writing this comment on the fly and did not look at your source code.

    …SO…I would play around with the “position:” styles and change the one that says “absolute” to “relative”…that should fix it…

    Try changing the sub ‘li’ or ‘ul’ position style from ‘absolute’ to ‘relative’…I had the same issue and it seemed to fix mine. However, I am writing this comment on the fly and did not look at your source code.

    …SO…I would play around with the “position:” styles and change the one that says “absolute” to “relative”…that should fix it…

    How did you solve the problem? It looks like your menu is working now on your site.

    I have a similar problem. I built my own theme and wanted to use the Twentyten menu. Have formatted everything set to my liking, except the menu appears vertically instead of horizontally.

    Have tried replacing all the display: block with inline and changing or removing the absolute and relative positioning but to no avail.

    I’m working on MAMP so my site/menu is not active online yet.

    Would be great if you could post your solution.
    Thanks!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘how to "horizontalize" a dropdown menu’ is closed to new replies.