javascript - 它可能的摘要菜单像这张图片一样放在左边吗？

Question

我看到一个代码 http://codepen.io/pdaoust/pen/fHybA

$(function() {
  $('details').on('mouseover focus', function() {
    $(this).attr('open', true);
  }).on('mouseout blur', function() {
    $(this).attr('open', false);
  })
});

html {
  line-height: 1.5;
}
details {
  width: 20em;
  border: 1px solid #ddd;
  padding: 0 .5em;
}
summary {
  padding: 0 .5em;
  margin: 0 -.5em;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  float: right;
  content: '▾';
  width: 1.5em;
  text-align: center;
  margin-right: -.5em;
}
details[open] summary::before {
  content: '▴';
}

<details tabindex=0>
  <summary>Hi, I am a summary.</summary>
  <p>Well I am some content. <a href="#">Here's a link.</a></p>
</details>

为了创建一个悬停菜单，但我想知道是否可以使用它来像这张图片一样将菜单放在左边

请帮帮我

Answer 1

如果不将代码转换成其他东西的话。该笔中的代码旨在完全执行其功能，在悬停时显示详细文本。虽然菜单看起来很相似，但它们需要的代码稍微复杂一些。如果您想要一个菜单​​，请寻找用于菜单的代码。