Question

我有一个水平的导航栏，我需要添加更多链接到其中一个项目，但当我鼠标悬停时，就像下拉列表一样，我在css，html中新增了所以请帮我解决它，以下是当前代码：

   <ul>              
            <li 

                >@Html.ActionLink("ANALYSIS", "Powercurve", "PowerCurve", new { }, new { @class = "navItem" })

            </li>


        }
        //Admin


        if (HttpContext.Current.User.IsInRole(ParkViewerNG.Security.Role.POWERCURVE))
        {

            <li 
                  <text>class="nav-current"</text>
                }
                >@Html.ActionLink("ADMIN", "ListOfTurbines", "AdminTool", new { }, new { @class = "navItem" })

            </li>


        }

       // TestRanking

       //  Admin


           <li 

              >@Html.ActionLink("MANAGEMENT", "parkList", "Ranking", new { }, new { @class = "navItem" })


           </li>


  </ul>

以下是我需要添加以使其下拉，我已经尝试过但不起作用，意味着dosnt成为下拉列表，我不知道在这里添加它，

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
  }

我添加如下：

<div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

将有任何帮助

Answer 1

您可以通过以下方式在HTML的其余部分插入下拉内容：

public static void sortStudentScores(String namesArry[], int scoresArry[]) {
    int tempScore;
    String tempName;

    for (int i = 0; i < scoresArry.length; i++) {

        for ( int j= i + 1; j < scoresArry.length; j++) {

            if (scoresArry[i] < scoresArry[j]) {
                tempScore = scoresArry[i];
                scoresArry[i] = scoresArry[j];
                scoresArry[j] = tempScore;
                tempName = namesArry[i];
                namesArry[i] = namesArry[j];
                namesArry[j] = tempName;

            }
        }
    }

    System.out.println("\nDescending Order:");

    for (int i = 0; i < namesArry.length; i ++) {
        System.out.println("Student Name: " + namesArry[i] + " " + 
scoresArry[i]);
    }
}

你的.dropdown-content CSS是正确的，你只需要添加一个样式规则来声明下拉内容在将鼠标悬停在菜单项上时必须显示，例如：

<ul>
  <li id="analysis">
    ANALYSIS
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li>ADMIN</li>
  <li>MANAGEMENT</li>
</ul>

我让a demo更清楚。

你还可以做的就是节省一些时间并使用像Bootstrap这样的框架。针对您的特定问题，请查看Bootstrap的Navbar。除非您想尝试使用HTML和CSS来了解这些导航栏是如何实际制作的。

不能让我的vaigation栏下拉

1 个答案: