有关侧边栏栏
我的侧边菜单栏中有问题。首先，我想要一个侧边菜单栏的自定义滚动条，它运行良好但有问题。当我尝试将鼠标悬停在最后一个父菜单上时，子菜单位置显示在上方，但同时我尝试将鼠标悬停在该子菜单上，这次子菜单的位置变为向下，这是我想要的知道如何解决。
您可以看到有关问题的演示。滚动到最后一个菜单时有问题（在GIF图像演示中显示）
此处链接获取所有HTML / CSS / JS https://drive.google.com/drive/folders/0B6tYK76Lu9DkWnlMM2g2SXUyZkE
我正在尝试的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-dropdownhover.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<!-- custom scrollbar stylesheet -->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<link href="css/font.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<link rel="stylesheet" href="css/fm.scrollator.jquery.css" />
<!-- Custom Fonts -->
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap-dropdownhover.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.verticle-menu {width: 100%; float: left;}
.verticle-menu #info {font-size: 18px; color: #555; text-align: center; margin-bottom: 25px;}
.verticle-menu a { color: #000000; font-size: 12px; text-transform: uppercase;}
.verticle-menu .scrollbar {margin-left: 0px; float: left; /*height: 700px;*/ background: #fff; overflow-y: scroll; margin-bottom: 0px; width: 100%;}
.verticle-menu .force-overflow {min-height: 450px; border-right: 1px solid #cccccc; height: 100%;}
.verticle-menu #wrapper {text-align: center; width: 500px; margin: auto;}
.verticle-menu #style-3::-webkit-scrollbar-track {background-color: #fff;}
.verticle-menu #style-3::-webkit-scrollbar {width: 6px; background-color: #fff;}
.verticle-menu #style-3::-webkit-scrollbar-thumb {background-color: #fff;}
.verticle-menu .wrapper {position: relative;}
.verticle-menu ul {width: 100%; overflow-x: hidden; overflow-y: auto;}
.verticle-menu ul {color: white; font-family: sans-serif; font-size: 16px; padding: 0;}
.verticle-menu li {position: static; list-style: none;}
.verticle-menu li .wrapper {position: absolute; z-index: 10; display: none; left: 100% !important;}
.verticle-menu li:hover > .wrapper {display: block;}
.verticle-menu li {line-height: 34px; border-bottom: 1px solid #cccccc; font-size: 12px; padding: 0px 5px;}
.verticle-menu li ul {margin: 0;}
.verticle-menu li span {color: #000;}
.verticle-menu li .wrapper {cursor: auto; border: 1px solid #cccccc; margin-left: -1px; width: 100%; margin-top: -1px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding:0px; border-bottom:none;}
.verticle-menu li .wrapper li {line-height: 34px; border-bottom: 1px solid #cccccc; font-size: 12px; padding: 0px 7px;}
.verticle-menu li .wrapper li a:hover {color: #F70004;}
.verticle-menu li:nth-child(2n) {background: #fff;}
.verticle-menu li:nth-child(2n+1) {background: #fff;}
.verticle-menu li.parent {cursor: pointer;}
#scrollable_div1 {height: 700px; width: 100%; overflow: auto; background-color: #fff; border: 1px solid #cccccc;}
.topcls{top: auto !important;}
</style>
</head>
<body>
<div>
<!-- Navigation -->
<div class="col-lg-12 padding0">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<h4 style="color:#fff; text-transform:uppercase;display:block; text-align:center;">HEADER</h4>
</nav>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 padding0">
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div style="width:12%; float:left; z-index:2; position:fixed;">
<div class="verticle-menu">
<div id="scrollable_div1">
<div>
<ul>
<li class="parent">
<span class="main-icon"> </span>
<span>Menu 01</span>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<span class="main-icon"> </span>
<span>Menu 02</span>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 03</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 04</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 05</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 06</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 07</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 08</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 09</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 10</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 11</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 12</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 13</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 14</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 15</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 16</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 17</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 18</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 19</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 20</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 21</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 22</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 23</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 24</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent">
<a href="#">
<span class="main-icon"> </span>
<span>Menu 25</span>
</a>
<div class="wrapper">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
<li class="parent dropdown dropdown-inline">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
<span class="main-icon"> </span>
<span>Menu 26</span>
</a>
<div class="wrapper dropdown-menu">
<ul>
<li><a href="#" tabindex="-1">Menu 01</a></li>
<li><a href="#" tabindex="-1">Menu 02</a></li>
<li><a href="#" tabindex="-1">Menu 03</a></li>
<li><a href="#" tabindex="-1">Menu 04</a></li>
<li><a href="#" tabindex="-1">Menu 05</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
<div id="page-wrapper" style="width:88%; float:left; z-index:0; position:absolute; right:0;">
<div class="container-fluid">
// Contain which i removed
</div>
<!-- /.container-fluid -->
</div>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/fm.scrollator.jquery.js"></script>
<script src="js/bootstrap-dropdownhover.js"></script>
<script>
(function ($) {
$(window).resize(function () {
$('#scrollable_div1').height($(window).height() - 52);
});
$(window).on("load", function () {
$('#scrollable_div1').height($(window).height() - 52);
$('#scrollable_div1').scrollator();
});
})(jQuery);
</script>
</body>
</html>
谢谢你提前。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？