html - 这个 CSS 下拉菜单中的向下箭头来自哪里？-6ren

html - 这个 CSS 下拉菜单中的向下箭头来自哪里？

转载作者：搜寻专家更新时间：2023-10-31 22:43:03

24

4

<分区>

我正在摆弄 this menu对于触摸屏:

#nav span:after 以某种方式导致跨度上出现向下箭头 - 怎么办？它从何而来？如何更改此图标/字符？

它似乎不是来自 content 属性，而且任何地方都没有图像文件。当我在自己的系统中复制它时，我在 IE 和 FF 中也得到了箭头。如果我们将 nav 标记更改为 div 并且如果我们删除 aria-haspopup，它就会出现。如果我在 IE 或 FF 中按 F12，我找不到它以查看它被引入的位置，除非它是使用边框或其他东西的一些奇怪的怪癖。

HTML:

<nav id="nav" role="navigation"> 
    <span href="#nav" title="Show navigation">Show navigation</span>
    <span href="#" title="Hide navigation">Hide navigation</span>

    <ul class="clearfix">
        <li><a href="">Home</a>

        </li>
        <li> <a href="" aria-haspopup="true"><span>Blog</span></a>

            <ul>
                <li><a href="">Design</a>

                </li>
                <li><a href="">HTML</a>

                </li>
                <li><a href="">CSS</a>

                </li>
                <li><a href="">JavaScript</a>

                </li>
            </ul>
        </li>
        <li> <a href="" aria-haspopup="true"><span>Work</span></a>

            <ul>
                <li><a href="">Web Design</a>

                </li>
                <li><a href="">Typography</a>

                </li>
                <li><a href="">Front-End</a>

                </li>
            </ul>
        </li>
        <li><a href="">About</a>

        </li>
    </ul>
</nav>

CSS:

 #nav {
     width: 60em;
     /* 1000 */
     font-family:'Open Sans', sans-serif;
     font-weight: 400;
     position: absolute;
     top: 25%;
     left: 50%;
     margin-left: -30em;
     /* 30 480 */
 }
 #nav > span {
     display: none;
 }
 #nav li {
     position: relative;
 }
 #nav li a {
     color: #fff;
     display: block;
 }
 #nav li a:active {
     background-color: #c00 !important;
 }
 #nav span:after {
     width: 0;
     height: 0;
     border: 0.313em solid transparent;
     /* 5 */
     border-bottom: none;
     border-top-color: #efa585;
     content:'';
     vertical-align: middle;
     display: inline-block;
     position: relative;
     right: -0.313em;
     /* 5 */
 }
 /* first level */
 #nav > ul {
     height: 3.75em;
     /* 60 */
     background-color: #e15a1f;
 }
 #nav > ul > li {
     width: 25%;
     height: 100%;
     float: left;
 }
 #nav > ul > li > a {
     height: 100%;
     font-size: 1.5em;
     /* 24 */
     line-height: 2.5em;
     /* 60 (24) */
     text-align: center;
 }
 #nav > ul > li:not(:last-child) > a {
     border-right: 1px solid #cc470d;
 }
 #nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a {
     background-color: #cc470d;
 }
 /* second level */
 #nav li ul {
     background-color: #cc470d;
     display: none;
     position: absolute;
     top: 100%;
 }
 #nav li:hover ul {
     display: block;
     left: 0;
     right: 0;
 }
 #nav li:not(:first-child):hover ul {
     left: -1px;
 }
 #nav li ul a {
     font-size: 1.25em;
     /* 20 */
     border-top: 1px solid #e15a1f;
     padding: 0.75em;
     /* 15 (20) */
 }
 #nav li ul li a:hover, #nav li ul:not(:hover) li.active a {
     background-color: #e15a1f;
 }
 @media only screen and (max-width: 62.5em)
 /* 1000 */
 {
     #nav {
         width: 100%;
         position: static;
         margin: 0;
     }
 }
 @media only screen and (max-width: 40em)
 /* 640 */
 {
     html {
         font-size: 75%;
         /* 12 */
     }
     #nav {
         position: relative;
         top: auto;
         left: auto;
     }
     #nav > span {
         width: 3.125em;
         /* 50 */
         height: 3.125em;
         /* 50 */
         text-align: left;
         text-indent: -9999px;
         background-color: #e15a1f;
         position: relative;
     }
     #nav > span:before, #nav > span:after {
         position: absolute;
         border: 2px solid #fff;
         top: 35%;
         left: 25%;
         right: 25%;
         content:'';
     }
     #nav > span:after {
         top: 60%;
     }
     #nav:not(:target) > span:first-of-type, #nav:target > span:last-of-type {
         display: block;
     }
     /* first level */
     #nav > ul {
         height: auto;
         display: none;
         position: absolute;
         left: 0;
         right: 0;
     }
     #nav:target > ul {
         display: block;
     }
     #nav > ul > li {
         width: 100%;
         float: none;
     }
     #nav > ul > li > span {
         height: auto;
         text-align: left;
         padding: 0 0.833em;
         /* 20 (24) */
     }
     #nav > ul > li:not(:last-child) > span {
         border-right: none;
         border-bottom: 1px solid #cc470d;
     }
     /* second level */
     #nav li ul {
         position: static;
         padding: 1.25em;
         /* 20 */
         padding-top: 0;
     }
}

24

4

0

文章推荐： php - Yii2 中的自定义图标

文章推荐： php - 如何在 PHP 中正确使用 WooCommerce 订阅 API？

文章推荐： javascript - 使用 Protractor 测试链接颜色

c# - WPF-如何在不使用向上、向下、向左和向右箭头键的情况下设置向上、向下、向左、向右事件？
我正在使用面部跟踪进行 HCI(人机交互)。我正在尝试使用面部控制 PC。我有 3x3 二维网格按钮。1 2 34 5 67 8 9 假设，当前焦点在按钮 5 上。如果我按向上箭头，则焦点将在 2
java - 螺旋穿过二维数组(l-r，向下，r-l，向下，l-r，...)
我正在为蛇和梯子制作一 block 板，到目前为止，我已经按降序打印了板。但是，我需要以正确的方式打印电路板。编辑“螺旋下降”意味着 100...91 81...90 80...71 ...
jQuery 向下/向上滑动和响应式设计
我有一个可以响应式调整大小的菜单，因此每次调整大小时 div (#menuWFhover) 的内容都会重新排列，因此 div 根据窗口大小具有不同的高度。当我使用 jQuery slideDown/
javascript - 向下/向上滚动时显示白屏
我们从服务器获取数据并附加 ListView 。我们的问题是，当向上/向下滚动时，它首先显示白屏，然后显示数据。向下/向上滚动时，之前出现的白屏应删除 for (var i=0; i");
javascript - 向下/向上滚动时导航汉堡图标反复闪烁
我想要一个汉堡图标动态改变颜色的代码，以适应网站的黑色部分/部分和白色。它最初是 3 段白色，js 代码几乎是好的和正确的，但是当它在白色部分时它一直闪烁，并在红色和白色之间闪烁。 js var to
jquery - 单击页脚向上/向下
我对点击事件的页脚位置有疑问。我正在使用 bootstrap css，我有一个可折叠元素(bootstrap 中的 Accordion )，当它折叠时它有一个名为 .accordion-toggle.
css - 向下/向上滑动动画
在此代码段中，使用关键帧和动画并显示无/ block ，div 动画以在悬停时向下滑动。 h1 { padding: 20px; } div { width: 100%; background
Python3如何按一定精度向上(向下)舍入
我需要对一个 float 进行四舍五入。例如 4.00011 。内置函数 round() 总是在数字 > .5 时向上舍入，在 = 0 val *= 10 ** precision r
c++ - 调整文件大小(向下)
我正在尝试就地缩小文件。我正在用另一个文件的内容替换一个文件的内容，完成后我想确保源文件是否小于目标文件，目标文件是否正确收缩。 (为什么:因为dest文件是一个备份，写入media的开销很大，所以
c# - 如何整数除以负数*向下*？
似乎每当我用一个负整数除以一个正整数时，我都需要它向下舍入 (向 -inf)，而不是向 0。但 C# 和 C++ 都向 0 舍入。所以我想我需要一个 DivideDownward() 方法。我可以用
Javascript 按键/向下/向上事件触发顺序
考虑这个简单的代码: document.addEventListener( 'keypress', function() { console.log( 'press' ); } ); document
.net - 如何检查azure资源是否可用(向上/向下)
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
.net - 如何检查azure资源是否可用(向上/向下)
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动？我是 Azure 的新手，如果有人能提供一些启发，那就太好了。
java - 如何使recyclerview无限滚动(向下/向上)？
我见过几个recyclerview的无限滚动示例，但它们都是向下滚动的。我想要的是一次又一次地加载我的列表，但无论用户是从上面还是从下面滚动。正常列表向上滚动向下滚动这样可以通过无限滚动一遍
jquery向上/向下 slider 与ajax冲突
我正在使用带有 View 的 drupal 7，并且我正在使用我发现的向上/向下文本幻灯片的 jquery 脚本。它有效，但是当我尝试将它与带有 ajax 的 View 公开过滤器一起使用时，它似乎不
jquery效果-向下/向上滑动隐藏div，隐藏当前显示的隐藏div
*场景我希望制作一个类似于本网站上的 jquery 效果，它位于主 Flash 添加的右侧: http://www.commbank.com.au/ *问题我已经开始了，但是用很多方法遇到了一些障
jquery - 如何循环遍历颜色数组以更改按键背景(按下/向下)
互联网。如果这与其他人没有什么关系，请原谅我，但我会将其留在这里，以防这是一个有效的问题。我正在尝试创建一个文本区域字段，其中用户每次按下键(a-z)，都会触发背景颜色更改(在数组中列出)。我一直在
javascript - 按住一个键时如何避免多个键向上/向下/按下事件？
我正在创建一个网络前端来控制一个小型机器人。 Ajax 调用将在 keydown 上进行，以启动机器人，并在 keyup 上进行停止。我的问题是，当按下某个键时，keyup、keydown 和 ke
javascript - 滚动条强制 Div 向下
我在内容容器中有两个 div，一个向左浮动，另一个向右浮动。我正在使用屏幕的整个宽度。左 div 宽度为 1290px，右 div 宽度为 625px。有时，在加载页面时，滚动条会更改可用屏幕宽度的宽
css - 向下/向上滚动页面时自动定位 div
请看这个UI sketch图片，我在某个站点的侧边栏(黑框)中有这个 div，当我向下滚动或向上滚动时，我不希望它隐藏...我希望它在我向下滚动和移动时自行向下移动当我向上滚动时向上滚动，这样它就永远

首页

博学

6Ren·AI

商城

html - 这个 CSS 下拉菜单中的向下箭头来自哪里？