html折叠按钮不显示

html-css016

html折叠按钮不显示,第1张

网络的问题。html折叠按钮不显示多数是网络连接异常导致。

1、首先打开电脑检查网络。

2、其次打开进行测试网络连接是否异常。

3、最后点击重新进入即可。

<!DOCTYPE HTML>

<html>

<body>

<details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

</body>

</html>

参考以下代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            * {

               margin: 0

               padding: 0

               }

            

            #parent >li> span{background: #999999display: blockwidth: 200pxborder:1px solid #ECEEF2}

            li {line-height: 40pxdisplay: block}

            li  p{

                    display: inline-block

                    width: 0px

                    height: 0px

                    border-left: 5px solid transparent

                    border-right: 5px solid transparent

                    border-top: 5px solid#2f2f2f

                      }

             li>ul{display: none}

             li>ul>li{border: 1px solid #DEDEDEwidth: 199px}

             #parent span:hover + ul{display: block}

             #parent span:hover >p{

                     display: inline-block

                    width: 0px

                    height: 0px

                    border-top: 5px solid transparent

                    border-bottom: 5px solid transparent

                    border-left: 5px solid#2f2f2f}

        </style>

    </head>

    <body>

        <ul id="parent">

            <li>

                <span><p></p>列表</span>

                <ul>

                    <li>子列表</li>

                    <li>子列表</li>

                    <li>子列表</li>

                </ul>

            </li>

            <li>

                <span><p></p>列表</span>

                <ul>

                    <li>子列表</li>

                    <li>子列表</li>

                    <li>子列表</li>

                </ul>

            </li>

            <li>

                <span><p></p>列表</span>

                <ul>

                    <li>子列表</li>

                    <li>子列表</li>

                    <li>子列表</li>

                </ul>

            </li>

        </ul>

    </body>

</html>