固定位置侧边栏和靠近它的下拉菜单-Fixedpositionsidebaranddropdownmenunearit

Here is my code

这是我的代码

html

css

html,
  body {
  padding: 0;
  margin: 0;
  height: 100%;
}

nav {
  width: 300px;
  box-sizing:border-box;
  padding:20px 0;
  height: 100%;
  background: #000;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
}

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

li {
  padding: 0;
  margin: 0;
}

.main li a {
  color: #fff;
  display: block;
  padding: 8px 20px;
}

.main li:hover {
  background: red
}

.main ul {
  display: none;
}

nav:hover {
  overflow: auto;
  background: #000;
  z-index: 1000;
}

.main li:hover ul {
  top: 0;
  padding:20px 0;
  box-sizing:border-box;
  height:100%;
  display: block;
  position: fixed;
  left: 270px;
  width: 200px;
  overflow: auto;
  bottom: 0px;
  z-index: 99;
  background:#333;
}

.content {
  margin-left: 350px;
  font-size: 30px;
}

The problem is that when you hover on Hover Me 1 you need see dropdown menu near sidebar. On windows its working fine, but in iOS and OsX its dont work! I dont know how to get rid of this problem.. May be is there any solution preferably on CSS, but if not - I am ready for jQuery.. Please tell me something, I already have a headache from this problem :(

问题是当你将鼠标悬停在Hover Me 1上时,你需要看到侧边栏附近的下拉菜单。在Windows上它工作正常,但在iOS和OsX它不工作!我不知道如何摆脱这个问题..可能是有任何解决方案最好在CSS,但如果没有 - 我准备jQuery ..请告诉我一些事情,我已经从这个问题头痛:(

Here is JsFiddle DEMO

这是JsFiddle DEMO

2 个解决方案

.main > li {
position:relative;
}
.main li:hover ul {
position: absolute;
left:300px;
top:0;
}