固定 header 中的下拉菜单在移动设备上截断

Question

我在移动设备 header 中遇到下拉菜单问题。当我将鼠标悬停在菜单项上时，它的子菜单会打开，但我无法滚动查看隐藏的项目，尽管我在子菜单 class.

中放置了 overflow-y: scroll

HTML:

<div class="site-header">
    <div class="main-navigation">
        <ul class="nav-menu">
            <li class="menu-item"><a href="#">Item 1</a>
            <ul class="sub-menu">
                <li class="menu-item"><a href="#">Item 1.1</a></li>
                <li class="menu-item"><a href="#">Item 1.2</a></li>
                <li class="menu-item"><a href="#">Item 1.3</a></li>
                <li class="menu-item"><a href="#">Item 1.4</a></li>
                <li class="menu-item"><a href="#">Item 1.5</a></li>
                <li class="menu-item"><a href="#">Item 1.6</a></li>
                <li class="menu-item"><a href="#">Item 1.7</a></li>
                <li class="menu-item"><a href="#">Item 1.8</a></li>
                <li class="menu-item"><a href="#">Item 1.9</a></li>
           </ul>
           </li>
           <li class="menu-item"><a href="#">Item 2</a>
           <ul class="sub-menu">
               <li class="menu-item"><a href="#">Item 2.1</a></li>
               <li class="menu-item"><a href="#">Item 2.2</a></li>
               <li class="menu-item"><a href="#">Item 2.3</a></li>
               <li class="menu-item"><a href="#">Item 2.4</a></li>
               <li class="menu-item"><a href="#">Item 2.5</a></li>
               <li class="menu-item"><a href="#">Item 2.6</a></li>
               <li class="menu-item"><a href="#">Item 2.7</a></li>
               <li class="menu-item"><a href="#">Item 2.8</a></li>
               <li class="menu-item"><a href="#">Item 2.9</a></li>
           </ul>
           </li>
           <li class="menu-item"><a href="#">Item 3</a>
           <ul class="sub-menu">
               <li class="menu-item"><a href="#">Item 3.1</a></li>
               <li class="menu-item"><a href="#">Item 3.2</a></li>
               <li class="menu-item"><a href="#">Item 3.3</a></li>
               <li class="menu-item"><a href="#">Item 3.4</a></li>
               <li class="menu-item"><a href="#">Item 3.5</a></li>
               <li class="menu-item"><a href="#">Item 3.6</a></li>
               <li class="menu-item"><a href="#">Item 3.7</a></li>
               <li class="menu-item"><a href="#">Item 3.8</a></li>
               <li class="menu-item"><a href="#">Item 3.9</a></li>
           </ul>
           </li>
           <li class="menu-item"><a href="#">Item 4</a>
           <ul class="sub-menu">
               <li class="menu-item"><a href="#">Item 4.1</a></li>
               <li class="menu-item"><a href="#">Item 4.2</a></li>
               <li class="menu-item"><a href="#">Item 4.3</a></li>
               <li class="menu-item"><a href="#">Item 4.4</a></li>
               <li class="menu-item"><a href="#">Item 4.5</a></li>
               <li class="menu-item"><a href="#">Item 4.6</a></li>
               <li class="menu-item"><a href="#">Item 4.7</a></li>
               <li class="menu-item"><a href="#">Item 4.8</a></li>
               <li class="menu-item"><a href="#">Item 4.9</a></li>
           </ul>
           </li>
        </ul>
    </div>
</div>

CSS:

.site-header {
     position: fixed;
     left: 0;
     width: 100%;
     z-index: 999;
}

.main-navigation {
     text-align: center;
}

.main-navigation ul {
     list-style: none;
     margin: 0;
     padding: 0;
}

.main-navigation li {
     position: relative;
}

.main-navigation a {
     display: block;
     padding: 0.9em;
     color: #333;
     border: 1px solid #ccc;
     cursor: pointer;
     text-decoration: none;
}

.main-navigation ul li > ul.sub-menu {
     display: none;
     overflow-y: scroll;
     background: #eaeaea;
}

.main-navigation ul li:hover > ul.sub-menu,
.main-navigation ul li.focus > ul.sub-menu {
     display: block;
}

FIDDLE:

http://jsfiddle.net/cb0Lbuto/24/

有什么想法吗？（header必须固定，我无法将其更改为相对或绝对）

提前致谢

Answer 1

添加max-height

.main-navigation ul li > ul.sub-menu {
    background: #eaeaea none repeat scroll 0 0;
    display: none;
    max-height: 320px;
    overflow: auto;
}

Answer 2

css 我使用的样式。

    .dropdown-submenu {
        position: relative;
    }

        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
            border-color:#f2f2f2;
        }

        .dropdown-submenu:active > .dropdown-menu {
            display: block;
        }

        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }

        .dropdown-submenu:active > a:after {
            border-left-color: white;
        }

        .dropdown-submenu.pull-left {
            float: none;
        }

            .dropdown-submenu.pull-left > .dropdown-menu {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }


                .dropdown-submenu{

    background-color:white;
    color:black;
}

js 脚本：-

$(document).ready(function () {
        $("li.dropdown-submenu > a").on("click", function () {
            $("li.dropdown-submenu").removeClass("open");
            if ($(this).parent("li.dropdown-submenu").hasClass("in-use")) {
               $(this).parents("li.dropdown-submenu").addClass("open");
                $(this).parent("li.dropdown-submenu").removeClass("open");
                $(this).parent("li.dropdown-submenu").removeClass("in-use");
                $(this).siblings("ul.dropdown-menu").children("li.dropdown-submenu").removeClass("open");
                $(this).siblings("ul.dropdown-menu").children("li.dropdown-submenu").removeClass("in-use");
           } else {
              $(this).parents("li.dropdown-submenu").addClass("open");
               $(this).parents("li.dropdown-submenu").addClass("in-use");
            }
            return false;
       });
   });

固定 header 中的下拉菜单在移动设备上截断

Dropdown menu in a fixed header cut off on mobile

html

css

css-position

overflow

drop-down-menu