我遇到了div
我想要滚动的问题。
我的菜单位于此div(全屏)this is it。当您将鼠标悬停在有孩子的元素上时,菜单会展开并离开屏幕,这就是我添加滚动的原因,但它并没有滚动到底部(它隐藏了最后一个菜单)。
这是我的CSS和HTML:
.tablet-menu {
display: none;
background: #000;
position: fixed;
height: 100%;
width: 100%;
opacity: 0.7;
z-index: 1001;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.tablet-menu.show {
display: block;
}
.tablet-menu-scroll {
overflow: scroll;
height: 100%;
width: 100%;
}
.tablet-menu ul {
top: 0;
bottom: 0;
position: relative;
text-align: center;
padding: 0;
margin: 0;
}
.tablet-menu li {
color: #FFF;
background: #000;
}
.tablet-menu li a {
text-transform: uppercase;
font-family: "Roboto Slab", Times, Georgia, serif;
font-weight: bold;
border-radius: 2px;
border-bottom: 1px solid white;
position: relative;
display: block;
padding-top: 4%;
padding-bottom: 4%;
}

<div class="tablet-menu">
<ul class="tablet-menu-scroll">
<?php wp_nav_menu(array ( 'theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?>
</ul>
</div>
&#13;
对不起PHP我正在使用WordPress,我写了一份菜单副本,没有真正的页面名称。
它是:click
我真的不知道问题出在哪里。
答案 0 :(得分:0)
根据您的要求尝试减少填充顶部或填充底部或两者,如下所示:
.tablet-menu li a {
padding-top: 3%;
padding-bottom: 3%;
}
答案 1 :(得分:0)
As you want it to be arranged below:
$(function(){
$('#show').on('click', function(){
$('.tablet-menu').addClass('show');
});
});
.tablet-menu{
display:none;
overflow:scroll;
background:#000;
height:100px;
width:300px;
opacity:0.7;
z-index:1001;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.tablet-menu.show{
display:block;
}
.tablet-menu-scroll{
height:100%;
width:100%;
}
.tablet-menu ul{
top:0;
bottom:0;
position:relative;
text-align:center;
padding:0;
margin:0;
}
.tablet-menu li{
color:#FFF;
background:#000;
}
.tablet-menu li a{
text-transform: uppercase;
font-family: "Roboto Slab", Times, Georgia, serif;
font-weight:bold;
border-radius:2px;
border-bottom:1px solid white;
position:relative;
display:block;
padding-top:4%;
padding-bottom:4%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="tablet-menu">
<ul class="tablet-menu-scroll">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<button id="show">Show</button>