0

how to make this submenu within the menus scrollable so that they don't go off screen

my html

<nav>
    <ul>
        <li><a href="#">parent</a></li>
        <li><a href="#">parent</a></li>
        <li>
            <a href="#">parent width child</a>
            <ul>
                <li><a href="#">child</a></li>
                <li><a href="#">child</a></li>
                <li>
                    <a href="#">child with children</a>
                    <ul>
                        <li><a href="#">grand child</a></li>
                        <li><a href="#">grand child</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">parent</a></li>
    </ul>
</nav>

my css

/* reset padding and margin where necessary etc. */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/* just some quick demo styles for color whatnot */
nav {
    background: black;
    color: white;
}

nav ul ul {
    background: #555;
}

nav ul ul ul {
    background: #999;
}

nav a  {
    color: white;
    white-space:nowrap;
}

nav a:hover  {
    background: #f80;
}

/* important functional styles */
nav > ul:after {
    /* clear the float */
    content:'';
    clear:both;
    display: block;
}

nav li  {
    /* for the topmost level we want them to float.  will be overridden */
    float:left;
}

nav li a {
    /* always apply padding and display block to the a.  better user experience. */
    display:block;
    padding: 10px;
}

nav li ul li {
    /* overridden floating here */
    float: none;
}

/* here is where all the positioning takes place */
nav li {
    position:relative;
}

nav li ul {
    position:absolute;
    left: 0; /* for top most level lets align to the left */
    top: 100%; /* and have it at the bottom of the parent */
    display:none; /* hide initialy */
}

nav li ul li ul {
    left: 100%; /* for grandchild level lets align to the right of the list item */
    top: 0; /* and have it at the top of the parent li */
}

nav ul li a:hover + ul,
nav ul li a + ul:hover {
    /* show only if the element or the immediately preceding anchor is hovered*/
    display:block;
}

/* enjoy! */

plz see the jsfiddle

when there are more than one submenu itemor like 50 such items then how to make it scrollable?

user1978142
  • 7,946
  • 3
  • 17
  • 20
user3449454
  • 61
  • 2
  • 12
  • 1
    This would probably be a better example of your problem: http://jsfiddle.net/bBR9J/6/ Typically what I've seen is to use a drawer-style menu, where the items can be ordered in columns or as groupings. The problem with `overflow: scroll`ing is that if it has a submenu itself, you're going to end up in scroll purgatory. – Jared Farrish Jun 28 '14 at 14:50
  • An example of what I mean can be seen at http://www.grindtv.com/ See [imgur](http://i.imgur.com/5kipMHj.png). – Jared Farrish Jun 28 '14 at 14:58

1 Answers1

0

Use overflow-y:scroll; and add a height to the second <ul>:

nav li ul li ul {
    left: 100%; /* for grandchild level lets align to the right of the list item */
    top: 0; /* and have it at the top of the parent li */
    height:200px;
    overflow-y:scroll;
}

JSFiddle Example

Jacob G
  • 13,762
  • 3
  • 47
  • 67
  • how do i color the scroll bar currently its grey how do i change its color to the theme colors – user3449454 Jul 08 '14 at 08:11
  • @user3449454 You can only change the appearance in IE using only CSS. Otherwise, you have to use javascript or jquery.check out this SO Question about it http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div/14150577#14150577 – Jacob G Jul 12 '14 at 01:17