css - 向右下拉菜单

Question

我正在尝试使用 HTML 和 CSS 使下拉菜单向右移动，示例如下:

http://codepen.io/anon/pen/RNLmvq

这是没有来自 codepen 的文本的屏幕截图。 http://s22.postimg.org/bd5sc51ap/sidebar.jpg

如果您需要我提供任何其他信息，请询问。

谢谢

Answer 1

我已经查看了您的代码，但答案似乎很清楚，不确定这是否是正确的答案，但我已经对其进行了修改以适用于您所描述的内容。如果这不是您要查找的内容，请描述有关您网站需求的更多详细信息。

http://codepen.io/anon/pen/KwXjaa

我已将您的 aside css 从“float:left”更改为“float:right”。

aside
{
    float: right;
    width: 164px;
    margin: 12px 0px 0px 0px;
    padding: 0px;
    border-right: thin dashed #2446ff;
    /*background-color: #ff0000;*/
}

更新

我已经清理了您的 HTML 并重新安排了类“Schedule”的放置位置。

http://codepen.io/anon/pen/KwXjaa

在您的 HTML 中，我已将“Schedule”类放在 li 上。

CSS 现在的时间表如下:

.Schedule ul li{
  display:none;
}
.Schedule:hover > ul {
  position:absolute;
  top:36px;
  left:168px;
  background:blue;
  display:block;

}

.Schedule:hover > ul li {
  position:relative;
  background:blue;
  display:block;

}

我已经清除了您之前在其中的大部分其他 CSS，希望为您提供干净的 html/css 片段，以便您准确了解集成时可能需要包含的内容。

上面发生的事情是你的“日程安排”类在 li 上，该类告诉所有 ul 和 li 下面的 li 分配了“日程安排”，它们将不显示任何内容。

当您将鼠标悬停在日程表上时，浏览器找到的位于“日程表”下的 ul 将再次显示 block 并具有绝对定位。

然后我做了它，以便第一个 ul li 悬停时的"dispatch"类将 li 设置为相对定位(否则所有 li 子级将堆叠在彼此之上，这是您不想要的)并将显示设置为阻塞，以便它们'再次可见。