Grow your CSS skills. Land your dream job.

In WordPress menu, I want to add top and bottom arrow to submenu content for scrolling

  • # April 30, 2013 at 9:07 am

    For sub menu i am using position:absolute so that the submenu appears on the right of the main menu. However, with position:absolute the scroller is not appearing.

    Is there any way i can make the scrollbar appear on the submenu after a certain height is reached?

    Here is my css:

    .main-navigation{
    float:left; position:relative; padding-left:3.071em; z-index:9999;
    }
    .main-navigation ul{ list-style:none; font-family:”Century Gothic”;}
    .main-navigation li{ text-transform:lowercase; display:block;}
    .main-navigation li a{
    display:block; color:#000;line-height:18px;
    padding:0 4em 0 1.429em;}

    .main-navigation li ul{
    display:none; position:absolute; z-index:1; top:1px; left:90%;
    }
    .main-navigation li ul li{
    line-height:18px; margin:0 1em 0.143em 0;
    }
    .main-navigation li ul li a {
    display: inline-block;
    line-height:14px;
    padding: 0 2em;
    width: 10.429em; margin:0 0 0 1em;
    white-space: normal;
    }

    .submenu .current-menu-item a{
    background:url(images/current-page.png) no-repeat left; }

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
    background:url(images/current-page.png) no-repeat left;
    }

    .sub-menu { height:80px; position:relative; display:block;}

    .main-navigation li.current_page_item ul,
    .main-navigation li.current_page_parent ul,
    .main-navigation li.current_page_ancestor ul { display: block; }

    You can see the temporary site here: http://www.trialhosting2.info/beraldocms/?page_id=89. For scrolling content i am using http://manos.malihu.gr/jquery-custom-content-scroller/ .

    Any help is really appreciated. Thank you.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".