Question

我正在使用this样式表创建下拉列表，但是悬停不能按预期工作。测试在ASP.NET之外，它可以正常工作。任何我可能出错的输入都将受到高度赞赏。感谢

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestApp._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <div class="dropdown-trigger">
        Dropdown <i class="ion-chevron-down"></i>
        <div class="dropdown-menu">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </div>
    </div>
</asp:Content>

CSS：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dropdown-trigger {
  line-height: 1;
  padding: 5px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.dropdown-trigger i {
  display: inline-block;
  padding: 5px;
  padding-right: 7px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  padding-bottom: 10px;
}
.dropdown-trigger:hover i {
  background-color: #99f;
}
.dropdown-trigger:hover .dropdown-menu {
  display: block;
}
.dropdown-menu {
  display: none;
  background-color: #99f;
  position: absolute;
  right: 5px;
  padding: 5px;
  left: 5px;
}
.dropdown-menu li {
  padding: 5px;
}

这是我的全部代码。

Answer 1

可能在某处缺少样式表引用。在主页头标记中添加样式表链接。还可以使用<style>..</style>标记在母版页中添加样式，或者将它们添加到.css文件中，并将该文件链接到母版页中。

这是一段视频，显示其中的代码位于主文件中，然后位于内容页面中。一切似乎都按预期工作。我做的唯一补充是在top: 30px;类中添加.dropdown-menu以删除图标和下拉菜单之间的空格。

视频：http://www.screencast.com/t/f85uKhdRXP0J

ASP.NET悬停不起作用

1 个答案: