这是我的问题。
<aside class="fixed-col">
<div class="fix-wrap cf">
<div class="fixed-col-inner">
<h1>lorem</h1>
<div class="menu-button">
<a href="#" onclick="return false"></a>
</div><!-- menu-button -->
<input type="text" id="search" placeholder="...">
<button class="search-button"></button>
<div class="fav-wrap">
<a href="#" class="fav">ipsum (0)</a>
</div><!-- fav-wrap -->
<div class="menu-side">
<img src="img/userpic.png" height="31" width="31" alt="">
<a href="#" class="username">xxx xxx</a>
<a href="#" class="logout">xxx</a>
<ul class="main-nav">
<li><a href="#">lorem</a></li>
<li><a href="#" class="add">ipsum</a></li>
<li class="last-li"></li>
</ul>
<ul class="second-nav">
<li>
<a href="#">HOVER ME AND SEE</a>
<div class="hidden-nav">
</div><!-- hidden-nav -->
</li>
<li><a href="#">amet</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div><!-- menu-side -->
<ul class="social">
<li class="facebook"><a href="#"></a></li>
</ul>
</div><!-- fixed-col-inner -->
</div>
</aside><!-- fixed-col -->
CSS
html, body {
margin: 0;
height: 100%;
}
.fixed-col {
width: 290px;
height: 100%;
position: fixed;
left: 0;
background: url(../img/menu-bg.jpg) no-repeat;
background-size: 100% 100%;
overflow-y: auto;
overflow-x: hidden;
}
.fix-wrap {
background: rgba(0, 0, 0, 0.8);
min-height: 100%;
}
.fixed-col-inner {
height: 100%;
position: relative;
}
.fixed-col-inner h1 {
margin: 0;
font: 24px/90px Arial;
color: #fff;
margin-left: 30px;
}
.menu-button {
width: 36px;
height: 32px;
position: absolute;
background: rgba(0, 0, 0, 0.6);
right: 30px;
top: 30px;
border-radius: 2px;
}
.menu-button a {
display: block;
background: url(../img/menu-button-bg.png) center center no-repeat;
width: 36px;
height: 32px;
}
.menu-button:hover {
background: #5b5c5b;
}
.fixed-col-inner input {
width: 230px;
height: 40px;
border: none;
background: rgba(0, 0, 0, 0.4);
outline: none;
color: #c4c4c4;
margin-left: 30px;
padding: 0 40px 0 15px;
}
button.search-button {
width: 17px;
height: 17px;
display: block;
border: none;
outline: none;
background: url(../img/search-icon.png) center center no-repeat;
position: absolute;
right: 46px;
top: 101px;
cursor: pointer;
}
.fav-wrap {
text-align: center;
margin: 25px 30px 0;
border-bottom: 1px solid #51504f;
padding-bottom: 30px;
background: url(../img/star.png) 30% 7% no-repeat;
}
a.fav {
display: inline-block;
padding-left: 27px;
color: #fff;
text-decoration: none;
font: 14px Calibri;
}
a.fav:hover {
text-decoration: underline;
}
.menu-side {
padding-top: 25px;
}
.menu-side img {
max-width: 31px;
max-height: 31px;
display: block;
margin: 0 auto 10px;
}
.username {
display: table;
margin: 0 auto;
font: 14px Calibri;
color: #fff;
text-decoration: none;
}
.username:hover, .logout:hover {
text-decoration: underline;
}
.logout {
display: table;
margin: 8px auto 0;
font: 12px Calibri;
color: #84e5df;
text-decoration: none;
}
.main-nav {
margin: 15px 0 0 0;
padding: 0;
list-style-type: none;
}
.main-nav li {
display: block;
}
.main-nav li:hover {
background: #4d4d4d;
}
.main-nav li a {
font: 14px/39px Calibri;
color: #f5f5f5;
text-decoration: none;
display: block;
background: url(../img/paper-empty.png) left center no-repeat;
padding-left: 30px;
margin-left: 30px;
}
.main-nav li a.add {
background: url(../img/paper-add.png) left center no-repeat;
}
.last-li {
margin: 15px 30px 0;
border-bottom: 1px solid #51504f;
}
.second-nav {
margin: 0;
padding: 0;
list-style-type: none;
max-height: 0px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all .5s ease;
}
.second-nav li {
display: block;
}
.second-nav li:first-child {
margin-top: 15px;
}
.second-nav li:hover {
background: #4d4d4d;
}
.second-nav li a {
font: bold 16px/39px Calibri;
color: #f5f5f5;
text-decoration: none;
display: block;
padding-left: 30px;
}
.menu-side:hover .second-nav{
max-height: 5000px;
opacity: 1;
visibility: visible;
overflow: visible;
}
.social {
margin: 30px 30px 0 30px;
padding: 0;
text-align: center;
}
.social li {
display: inline-block;
vertical-align: middle;
margin: 0 5px;
}
.social li a {
vertical-align: middle;
}
.facebook a {
background: url(../img/facebook-ico.png) center center no-repeat;
display: block;
width: 10px;
height: 18px;
}
.vk a {
background: url(../img/vk-ico.png) center center no-repeat;
display: block;
width: 24px;
height: 14px;
}
.second-nav a:hover + .hidden-nav, .hidden-nav:hover {
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 290px;
background: black;
}
将鼠标悬停在.hidden-nav上时会显示<li>。但是当浏览器高度太小时 - 在侧边栏中出现垂直滚动条。我需要它，但因为它我不能悬停我的块.hidden-nav :)有没有办法隐藏我的侧边栏的滚动条，但它仍然可以滚动？）
这是JsFiddle Demo。将鼠标悬停在img上，您可以看到下拉菜单。将鼠标悬停在＆＃34; HOVER ME AND SEE＆＃34;你可以看到问题））
答案 0 :(得分：1)
我相信你可以通过改变这3个CSS类来做到这一点。
.fixed-col {
width: 290px;
height: 100%;
position: fixed;
left: 0;
background: url(../img/menu-bg.jpg) no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.fix-wrap {
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
overflow: hidden;
}
.fixed-col-inner {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
padding-right: 15px; /* Increase this value for cross-browser compatibility */
}
查看此Fiddle ..
答案 1 :(得分：1)
您可以做的一件事是，.hidden-nav位置左侧大约20px，因此它将覆盖滚动条。
如果您不希望它具有任何可见效果，那么您可以将其包装到另一个负责定位的容器元素中，并在左侧有一个20px的透明边框 - 像这样{{3 }}
只有一个小缺点 - 如果将鼠标从右侧移动到滚动条上，滚动条可能无法使用，因为它仍然会被透明边框覆盖。