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

我已经将你的css改为'float：right'，从'float：left'。

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

<强>更新

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

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的人，并且已经分配了“附表”的li，他们不会显示任何内容。

当您将鼠标悬停在计划表上时，浏览器发现的在“计划”下分层的ul将再次显示阻止并具有绝对定位。

然后我做了它，以便在第一个ul li的悬停时'Schedule'类将li设置为相对定位（否则所有li子将堆叠在彼此上面你不想要的）并将display设置为block以便它们再次可见。

下拉菜单到右边

1 个答案: