最后一个HTML列表项上的圆角底角?

尤特拉维斯(jusTravis)

我的这些下拉菜单运行正常,但菜单的底角没有四舍五入。我包括了html,css和jquery代码。您知道为什么我的最后一个列表项没有显示圆角吗?

感谢您的时间!

的HTML

    <nav>
    <ul>
        <li><a id="Me" href="#">About Me</a>
        <li><a href="#">Favorite Films</a>
            <!-- Films Drop-Down Menu -->
            <ul>
                <li><a id="DC" href="#">DC Cinematic Universe</a></li>
                <li><a id="Bond" href="#">James Bond</a></li>
                <li><a id="Marvel" href="#">Marvel Cinematic Universe</a></li>
                <li><a id="ST" href="#">Star Trek</a></li>
                <li><a id="SW" href="#">Star Wars</a></li>
                <li><a id="X" href="#">X-Men</a></li>
            </ul>
            <!-- /Films Drop-Down Menu -->
        </li>
        <li><a href="#">Favorite TV Shows</a>
            <!-- TV Drop Down Menu -->
            <ul>
                <li><a id="Americans" href="#">Americans, The</a></li>
                <li><a id="GoT" href="#">Game of Thrones</a></li>
            </ul>
            <!-- /TV Drop Down Menu -->
        </li>
    </ul>
</nav>

的CSS

        nav {
    width: 100%;
    height: 2em;
    float: left;
    position: relative;
    background: linear-gradient(hsl(1,79%,30%), hsl(1, 88%, 44%), hsl(2,90%,26%));
    border: hsl(1,79%,30%) 2px solid;
    border-radius: 20px 20px 0 0;
}

nav ul {
    list-style: none;
}

nav li {
    width: 33%;
    display: inline;
    float: left;
    position: relative;
}

nav li a {
    /* Makes entire block for link clickable - not just text. */
    display: block;
    color: white;
    font-size: 1.5em;
    font-weight:bold;
    text-shadow: 5px 5px 5px black;
    transform:skewX(160deg);
    text-decoration: none;
}

nav li a:hover {
    color: #FFCC33;
}

nav ul ul {
    display: none;
    position: absolute;
    background: hsla(1,79%,30%,.8);
    /*Z-Index enables layering - higher values put elements toward top */
    z-index: 99;
}

nav li li {
    float: none;
    width: 100%;
    position: relative;
    padding: 10px;
    /*border: 1px hsl(1,79%,30%);*/
}

nav li li a {
    font-size: 1.25em;
}

/* Round bottom corners of menu items on bottom of drop-down menus.  */
nav li li:last-child {
    border-radius: 0 0 20px 20px;
}

JQUERY

    //DROP-DOWN MENUS
$('nav li').hover(function() {
    // stop() stops all animation before slideDown()
    $('ul',this).stop().slideDown(250);
},
    //When not hovering.
    function(){
        $('ul',this).stop().slideUp(250);
    }
);
//DROP-DOWN MENUS
卢卡斯

除了最后一个li的选择器以外,您拥有的所有内容都是正确的。您需要执行以下两项操作之一:

nav li ul:last-child {...bottom border radius code...}

或者...

nav li li:last-of-type {...}

这也使我措手不及,我不确定实现是否在某个时候发生了变化。:last-child,顾名思义,选择周围元素的最后一个子元素,这就是为什么需要使用它来指定元素的原因。

:last-of-typeli在这种情况下,选择指定元素的最后一个

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

最后一个HTML列表项上的圆角底角?

来自分类Dev

如何替换最后一个HTML列表项?

来自分类Dev

在React中仅渲染最后一个列表项

来自分类Dev

将最后一个列表项与右侧对齐

来自分类Dev

从DynamoDB中删除最后一个列表项?

来自分类Dev

将每个顶级列表的绝对最后一个列表项存储在嵌套列表中

来自分类Dev

使用内联/主题B在第一个和最后一个列表项上显示错误图标的jQuery Mobile Listview(Firefox)

来自分类Dev

向AngularJS中的最后3个列表项添加一个类

来自分类Dev

我有一个追加到列表的输入,如何打印出最后一个列表项(最后一个输入)?

来自分类Dev

获取最后一个列表项索引的最pythonic方法

来自分类Dev

将css类添加到列表项,但jQuery中的最后一个除外

来自分类Dev

从父级到最后一个子级的自引用列表项计数

来自分类Dev

检查最后一个列表项是否等于长度 Xamarin Forms 绑定

来自分类Dev

添加圆角以列出隐藏最后一个元素的位置

来自分类Dev

如何在第一个和最后一个列表项处停止切换功能?

来自分类Dev

在列表中的最后一个元素上附加单词“ and”?

来自分类Dev

遍历html选择列表(最后一个值除外)

来自分类Dev

为什么最后一个列表项在自定义列表中的行为有所不同?

来自分类Dev

如何定位覆盖列表项和无序列表中的最后一个锚点元素

来自分类Dev

单击另一个列表项中的一个列表项

来自分类Dev

Django如何仅在一个列表项上发表评论

来自分类Dev

如何删除Vue.js列表项中的最后一个下拉分隔线类

来自分类Dev

有条件地将 CSS 应用于没有 JavaScript 的最后一个列表项

来自分类Dev

选择一个不带CSS子列表的列表项

来自分类Dev

如何为每个列表项生成一个列表

来自分类Dev

删除另一个列表中的列表项

来自分类Dev

更新列表的最后一个元素

来自分类Dev

删除列表的最后一个元素

来自分类Dev

更新列表的最后一个元素

Related 相关文章

  1. 1

    最后一个HTML列表项上的圆角底角?

  2. 2

    如何替换最后一个HTML列表项?

  3. 3

    在React中仅渲染最后一个列表项

  4. 4

    将最后一个列表项与右侧对齐

  5. 5

    从DynamoDB中删除最后一个列表项?

  6. 6

    将每个顶级列表的绝对最后一个列表项存储在嵌套列表中

  7. 7

    使用内联/主题B在第一个和最后一个列表项上显示错误图标的jQuery Mobile Listview(Firefox)

  8. 8

    向AngularJS中的最后3个列表项添加一个类

  9. 9

    我有一个追加到列表的输入,如何打印出最后一个列表项(最后一个输入)?

  10. 10

    获取最后一个列表项索引的最pythonic方法

  11. 11

    将css类添加到列表项,但jQuery中的最后一个除外

  12. 12

    从父级到最后一个子级的自引用列表项计数

  13. 13

    检查最后一个列表项是否等于长度 Xamarin Forms 绑定

  14. 14

    添加圆角以列出隐藏最后一个元素的位置

  15. 15

    如何在第一个和最后一个列表项处停止切换功能?

  16. 16

    在列表中的最后一个元素上附加单词“ and”?

  17. 17

    遍历html选择列表(最后一个值除外)

  18. 18

    为什么最后一个列表项在自定义列表中的行为有所不同?

  19. 19

    如何定位覆盖列表项和无序列表中的最后一个锚点元素

  20. 20

    单击另一个列表项中的一个列表项

  21. 21

    Django如何仅在一个列表项上发表评论

  22. 22

    如何删除Vue.js列表项中的最后一个下拉分隔线类

  23. 23

    有条件地将 CSS 应用于没有 JavaScript 的最后一个列表项

  24. 24

    选择一个不带CSS子列表的列表项

  25. 25

    如何为每个列表项生成一个列表

  26. 26

    删除另一个列表中的列表项

  27. 27

    更新列表的最后一个元素

  28. 28

    删除列表的最后一个元素

  29. 29

    更新列表的最后一个元素

热门标签

归档