2016-11-30 136 views
0

我正在使用this样式表创建下拉菜单,但悬停不能按预期方式工作。测试是ASP.NET以外的工作正常。任何我可能会出错的输入将受到高度赞赏。由于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; 
} 

这是整个代码,我有。

+0

嗯,这并不是所有的代码。您也有一个名为“Site.Master”的文件。事实上,'link'元素应该位于文档的''中。 –

+0

当我在视觉工作室中运行它似乎工作正常。你在哪个浏览器中遇到这个问题? –

+0

@MikeMcCaughan我在'head'有css链接# – Maddy

回答

0

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

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

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