horizontal in horizontal top menu bar

  • Hi,

    I’ve created in my blog a ‘horizontal in horizontal’ top menu bar that list the categories and subcategories and pages and their subpages. It auto-hide the subitems and show them when you mouse-over them. The only problem I have is that when the subitems are displayed, the rest of the page is pushed down. What I would like is to preserve the space where the subitems are displayed so when they appear, the rest of the page is not pushed down.

    This is the css I use:

    /*-----------------------------------------------------------------------------------------------
    Menu horizontal
    -----------------------------------------------------------------------------------------------*/
    #navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; text-align: right;}
    #navmenu li {display: inline;}
    #navmenu a {text-decoration:none;}

    #navmenu li ul {
    display: none;
    }
    #navmenu li:hover > ul {
    display: block;
    }

    And the html in header:

    <div id="navmenu">

    </div>

    Any help/tip will be appretiated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter ivancastell

    (@ivancastell)

    Sorry, forgot to mention my website: https://www.ivancastell.org

    What I try to achieve is something like what you get in the ‘secciones’ part of this page: https://www.blablablog.es but only when you mouse-over.

    Another good example is the effect that you get on the wordpress dashboard with plugin ‘Admin Drop Down Menu’:
    https://frenchfragfactory.net/ozh/my-projects/wordpress-admin-menu-drop-down-css/

    Thanks.

    Thread Starter ivancastell

    (@ivancastell)

    I’ll really appretiate some help, just a link or webpage where I can find the way to avoid the ‘push down’ effect.

    Thanks.

    Does this help? it’s taken from https://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp#hs3

    This specific part is addressing a similar issue to the one you described:

    “However now, which is not apparent yet in these simple demo pages, we have a problem if there is text underneath this navigation bar, which there would most likely be in a real page.

    Because we have left the first child list “in the flow” of the document rather than position it for pop-out purposes it is actually pushing any following text down below it. Normally in these drop down scenarios we would want it to drop down over the top of on any existing text.

    We can do this by pulling it out of the flow using absolute positioning again, only this time we don’t want to give it any offset co-ordinates, because we’re actually happy with where it is, and just in case we’ll give it a high z-index to ensure it and it’s children actually do appear over the top of any positioned text that may follow.

    #menu ul ul {
    position: absolute;
    z-index: 500;
    }

    Which now looks like this
    https://www.tanfa.co.uk/css/examples/menu/hs4.asp and I’ve now added some text in so you can see it tucks right up to the first level (heading) row.

    tanfa.co.uk/css/examples/menu/hs4.asp
    works not in IE6 for me.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘horizontal in horizontal top menu bar’ is closed to new replies.