css - 基础顶栏不起作用-6ren

css - 基础顶栏不起作用

转载作者：行者123 更新时间：2023-11-28 08:34:48

25

4

我正在尝试使用基础来构建导航菜单。黑色栏加载了我的内容，但某些功能不起作用。例如，当鼠标悬停在下拉菜单上时，下拉菜单不起作用。适当的鼠标悬停效果也不起作用。我是不是忘记了什么？

http://jsfiddle.net/Sbt75/755/

这是我的代码

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    <!--Jquery-->
    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>

    <!--Foundation-->
    <script src="js/foundation.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/foundation.css" type="text/css" />
    <link rel="stylesheet" href="css/normalize.css" type="text/css" />


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="contain-to-grid sticky">
        <nav class="top-bar" role="navigation" data-options="is_hover: true">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">VoIP Innovations</a></h1>
                </li>
            </ul>
            <section class="top-bar-section">
                <ul class="left">
                    <li class="has-dropdown">
                        <a href="#">Services</a>
                        <ul class="dropdown">
                            <li><a href="#">Origination</a></li>
                            <li><a href="#">Termination</a></li>
                            <li><a href="#">E911</a></li>
                            <li><a href="#">Hosted Billing</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Nav 2</a></li>
                    <li><a href="#">Nav 3</a></li>
                    <li><a href="#">Nav 4</a></li>
                    <li><a href="#">Nav 5</a></li>
                </ul>
            </section>
        </nav>
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
    <script>
        $(document).foundation();
    </script>

最佳答案

这里正在工作Fiddle .

首先，您必须将 data-topbar 属性放入您的 nav 元素中。

其次，你必须将带有菜单的li放入你的代码中:

<li class="toggle-topbar menu-icon">
   <a href="#">
      <span>Menu</span>
   </a>
</li>

整个 HTML:

<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
   <ul class="title-area">
      <li class="name">
         <h1>
            <a href="#">VoIP Innovations</a>
         </h1>
      </li>
      <li class="toggle-topbar menu-icon">
         <a href="#">
            <span>Menu</span>
         </a>
      </li>
   </ul>
   <section class="top-bar-section">
      <ul class="left">
         <li class="has-dropdown">
            <a href="#">Services</a>
            <ul class="dropdown">
               <li>
                  <a href="#">Origination</a>
               </li>
               <li>
                  <a href="#">Termination</a>
               </li>
               <li>
                  <a href="#">E911</a>
               </li>
               <li>
                  <a href="#">Hosted Billing</a>
               </li>
            </ul>
         </li>
         <li>
            <a href="#">Nav 2</a>
         </li>
         <li>
            <a href="#">Nav 3</a>
         </li>
         <li>
            <a href="#">Nav 4</a>
         </li>
         <li>
            <a href="#">Nav 5</a>
         </li>
      </ul>
   </section>
</nav>

关于css - 基础顶栏不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28096514/

25

4

0

文章推荐： ios - 如何转义正则表达式字符串

文章推荐： javascript - 如果其他元素不显示，则填充剩余空间

文章推荐： html - 在 slider (Chrome) 中通过表单域切换时出现意外滚动

文章推荐： css - mixin 中的多个过渡属性

php结合ajax实现赞、顶、踩功能实例
php应用越来越多，也越来越广泛，为了增加网站的丰富多彩，从而出现了很多新的技术。ajax是现代网站中不能缺少的一项技术，他可以异步刷新数据，而实现很多效果，比如刷新验证码，微博中的赞功能，都是运用
ios - 顶 View 时如何进行分页
我想在用户将tableView滚动到顶部时进行分页，因为我已经使用了这种UIScrollView方法。但是它将多次调用api 最佳答案不好意思当服务器提供数据计数数量 -(void)tableVi
ios - UIStoryboardSegue:顶 View 没有向下滑动
我有以下 swift 代码，我想要实现的是从顶部滑出的 segue。我希望第二个 VCView 位于第一个 VCView 下方，并且让第一个 VCView 滑出显示第二个 VCView。目前没有动画
ios - ECSlidingViewController 顶 View 动画问题
我正在使用 ECSliding我有这个问题! 在我的项目中有这个文件: InitViewController (ECSlidingController) FirstViewController (UI
用php和jQuery来实现“顶”和“踩”的投票功能
当我们浏览网页时，我们想对网页内容如文章、评论中的观点持赞同或反对意见时，可以通过点击网页中的“顶”和“踩”来进行投票。而整个交互过程，开发者可以通过ajax异步来实现，从而提高用户体验
android - 顶 View 的触摸也适用于底 View 的触摸
您好，我遇到了这样的问题，我有两个 View ，例如我的第一个 View 是 A，其图像如下所示我正在这个 View A 上打开 View B 例如，当我触摸没有按钮的区域时，在 View B 中
opencv - 使用 OpenCV 生成鸟瞰图/顶 View
我正在尝试从图像生成鸟瞰图。对于相机固有特性和畸变，我使用的是从驾驶模拟器中检索到的硬编码值，该驾驶模拟器的车顶上安装了相机。代码的基础来自“使用 OpenCV 库学习 OpenCV 计算机视觉”，
linux - 没有符号的 perf 顶 View 反汇编(带有剥离的二进制文件)
我正在尝试使用 Linux perf 进行一些性能分析。我有一个构建时去掉了符号的应用程序，令我惊讶的是 Linux perf top 无法显示 disassmbly 行。它只显示原始 EIP。我们
PHP+MySql+jQuery实现的＂顶＂和＂踩＂投票功能
本文实例为大家分享了基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码，供大家参考，具体内容如下数据库操作： ?
javascript - 如何使用父 div 顶 Angular 的复选框使 div 垂直和水平居中
我正在使用 VueJS 和 Bootstrap 开发应用程序。我试图将一个 div 与图像居中，同时让复选框标 checkout 现在右上角，如下所示。但是当鼠标悬停在卡片上时，图像会稍微向左移动，

首页

博学

6Ren·AI

商城

css - 基础顶栏不起作用