ASP.NET 호버가 작동하지 않습니다.

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

아마 어딘가에 스타일 시트 참조가 누락되었을 수 있습니다. 마스터 페이지 head 태그에 스타일 시트 링크를 추가하십시오. 또한 <style>..</style> 태그를 사용하여 마스터 페이지에 스타일을 추가하거나 .css 파일에 추가하고 마스터 페이지에 해당 파일을 연결하십시오.

다음은 마스터 파일의 코드와 콘텐츠 페이지의 코드를 보여주는 비디오입니다. 모든 것이 예상대로 작동하는 것 같습니다. 내가 만든 유일한 추가는 .dropdown-menu 클래스에 top: 30px;을 추가하여 아이콘과 드롭 다운 메뉴 사이의 공간을 제거하는 것입니다.

비디오 : http://www.screencast.com/t/f85uKhdRXP0J