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

Question

这是我的代码

HTML

<nav>
<ul class="main">
  <li><a href="#">Link</a></li>
  <li><a href="#">Hover Me 1</a>
  <ul>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child</a></li>
  <li><a href="#">child last</a></li>
   </ul>
 </li>
</nav>
<div class="content"></div>

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;
}

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

这是JsFiddle DEMO

Answer 1

您需要在子菜单上使用绝对位置，并在父li上使用相对位置，如下所示：

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

Answer 2

您需要对代码进行响应，并且可以通过在css中为不同的屏幕尺寸 ios屏幕尺寸添加media标记来执行此操作，然后根据 ios修改代码屏幕尺寸 喜欢这个样机 请参阅此DEMO