Question

练习锚标签和下拉菜单。在以下代码中，下拉列表不起作用。不知道为什么。包含文本“这是下拉菜单”的div应该恰好出现在包含文本“这是文本。它在中心”的div下面，只要后者悬停在其上。两个div的宽度都相同。

<ListBox x:Name="listbox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Tag="{Binding Path=Key}"
                           Text="{Binding Path=Value.ImieNazwisko}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

html,body {
	margin: 0px;
	height: 100%;
	/* [disabled]width: 100%; */
	left: 0px;
	top: 0px;
	background-color: rgba(255,255,255,1);
}

.wrapper {
	text-align: center;
	margin-top: 0;
	margin-left: auto;
	height: 100%;
	max-width: 960px;
	background-color: rgba(0,0,0,1);
	margin-right: auto;
	position: relative;
}

.link1 {
	height: auto;
	width: 50%;
	color: rgba(255,255,255,1);
	margin-right: auto;
	margin-left: auto;
	background-color: rgba(204,204,204,1);
}

.link1 a {
	text-decoration: none;
	display: block;
}

.link1 a:hover {
	text-decoration: underline;
	background-color: rgba(255,0,0,1);	
}

.link1 a:hover .dropdown {
	display: block;
}


.dropdown

{
	height: 25%;
	width: 50%;
	background-color: rgba(204,204,204,1);
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	display: none;
}

Answer 1

您的css选择器.link1 a:hover .dropdown选择具有类dropdown的元素，该元素必须位于悬停状态（a:hover）内的元素内，该元素位于具有等级link1。

这与您的html标记不符。

要使其正常工作，您可以将html更改为：

<div class="wrapper">
     <div class="link1">
          <a href="http://www.hotmail.com">
              This is text. Its in center
              <div class="dropdown">This is dropdown menu</div>
          </a>
     </div>
</div>

希望它有所帮助。

Answer 2

Lexith部分正确，您需要在容器div中添加下拉列表，然后您可以选择悬停链接的兄弟。

像这样;

CSS -

.link1 a:hover + .dropdown {
    display: block;
}

HTML -

<div class="link1">
  <a href="http://www.hotmail.com">This is text. Its in center</a>
  <div class="dropdown">This is dropdown menu</div>
</div>

CSS更新 - 这允许下拉列表在悬停时保持打开状态

.dropdown:hover,
.link1 a:hover + .dropdown {
    display: block;
}

这意味着它没有任何标签样式。 View my code pen

css下拉不工作

2 个答案: