在代码的下拉菜单中添加箭头

时间:2016-10-04 14:49:55

标签: html

我想为每个顶级菜单添加dropdownload箭头,而不是sub。

这是我想从下面这个网站链接添加的,但它不适合我 https://amethystwebsitedesign.com/how-to-add-arrow-indicators-to-genesis-navigation-menus/

  <head>

        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                padding:0;
                margin:0;
            }
            body{
                background:#f0f0f0;
                font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
                overflow-x:hidden;

            }
            h1{
                font-size:180px;
                line-height:180px;
                text-transform: uppercase;
                color:#f9f9f9;
                position:absolute;
                text-shadow:0 1px 1px #ddd;
                top:-25px;
                left:-20px;
                white-space: nowrap;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:11px;
            }
            span.reference a{
                color:#DF7B61;
                text-decoration:none;
                text-transform: uppercase;
                text-shadow:0 1px 0 #fff;
            }
            span.reference a:hover{
                color:#000;
            }
            .box{
                margin-top:129px;
                height:460px;
                width:100%;
                position:relative;
                background:#fff url(click.png) no-repeat 380px 180px;
                -moz-box-shadow:0px 0px 10px #aaa;
                -webkit-box-shadow:0px 0px 10px #aaa;
                -box-shadow:0px 0px 10px #aaa;
            }
            .box h2{
                color:#f0f0f0;
                padding:40px 10px;
                text-shadow:1px 1px 1px #ccc;
            }

        </style>
    </head>

  <body>

             <nav><ul id="ldd_menu" class="ldd_menu">
                <li>
                     <span>Vacations </span><!-- Increases to 510px in width-->
                    <div class="ldd_submenu">
                        <ul>
                            <li class="ldd_heading">By Location</li>
                            <li><a href="#">South America</a></li>
                            <li><a href="#">Antartica</a></li>
                            <li><a href="#">Africa</a></li>
                            <li><a href="#">Asia and Australia</a></li>
                            <li><a href="#">Europe</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Location</li>
                            <li><a href="#">South America</a></li>
                            <li><a href="#">Antartica</a></li>
                            <li><a href="#">Africa</a></li>
                            <li><a href="#">Asia and Australia</a></li>
                            <li><a href="#">Europe</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Category</li>
                            <li><a href="#">Sun &amp; Beach</a></li>
                            <li><a href="#">Adventure</a></li>
                            <li><a href="#">Science &amp; Education</a></li>
                            <li><a href="#">Extreme Sports</a></li>
                            <li><a href="#">Relaxing</a></li>
                            <li><a href="#">Spa and Wellness</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Category</li>
                            <li><a href="#">Sun &amp; Beach</a></li>
                            <li><a href="#">Adventure</a></li>
                            <li><a href="#">Science &amp; Education</a></li>
                            <li><a href="#">Extreme Sports</a></li>
                            <li><a href="#">Relaxing</a></li>
                            <li><a href="#">Spa and Wellness</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Theme</li>
                            <li><a href="#">Paradise Islands</a></li>
                            <li><a href="#">Cruises &amp; Boat Trips</a></li>
                            <li><a href="#">Wild Animals &amp; Safaris</a></li>
                            <li><a href="#">Nature Pure</a></li>
                            <li><a href="#">Helping others &amp; For Hope</a></li>
                            <li><a href="#">Diving</a></li>
                        </ul>
                        <a class="ldd_subfoot" href="#"> + New Deals</a>
                    </div>
                </li>
                <li>
                    <span>Equipment</span>
                    <div class="ldd_submenu">
                        <ul>
                            <li class="ldd_heading">By Location</li>
                            <li><a href="#">South America</a></li>
                            <li><a href="#">Antartica</a></li>
                            <li><a href="#">Africa</a></li>
                            <li><a href="#">Asia and Australia</a></li>
                            <li><a href="#">Europe</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Category</li>
                            <li><a href="#">Sun &amp; Beach</a></li>
                            <li><a href="#">Adventure</a></li>
                            <li><a href="#">Science &amp; Education</a></li>
                            <li><a href="#">Extreme Sports</a></li>
                            <li><a href="#">Relaxing</a></li>
                            <li><a href="#">Spa and Wellness</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Theme</li>
                            <li><a href="#">Paradise Islands</a></li>
                            <li><a href="#">Cruises &amp; Boat Trips</a></li>
                            <li><a href="#">Wild Animals &amp; Safaris</a></li>
                            <li><a href="#">Nature Pure</a></li>
                            <li><a href="#">Helping others &amp; For Hope</a></li>
                            <li><a href="#">Diving</a></li>
                        </ul>
                        <a class="ldd_subfoot" href="#"> + New Deals</a>
                    </div>
                </li>
                <li>
                    <span>Locations</span>
                    <div class="ldd_submenu">
                        <ul>
                            <li class="ldd_heading">By Location</li>
                            <li><a href="#">South America</a></li>
                            <li><a href="#">Antartica</a></li>
                            <li><a href="#">Africa</a></li>
                            <li><a href="#">Asia and Australia</a></li>
                            <li><a href="#">Europe</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Category</li>
                            <li><a href="#">Sun &amp; Beach</a></li>
                            <li><a href="#">Adventure</a></li>
                            <li><a href="#">Science &amp; Education</a></li>
                            <li><a href="#">Extreme Sports</a></li>
                            <li><a href="#">Relaxing</a></li>
                            <li><a href="#">Spa and Wellness</a></li>
                        </ul>
                        <ul>
                            <li class="ldd_heading">By Theme</li>
                            <li><a href="#">Paradise Islands</a></li>
                            <li><a href="#">Cruises &amp; Boat Trips</a></li>
                            <li><a href="#">Wild Animals &amp; Safaris</a></li>
                            <li><a href="#">Nature Pure</a></li>
                            <li><a href="#">Helping others &amp; For Hope</a></li>
                            <li><a href="#">Diving</a></li>
                        </ul>
                        <a class="ldd_subfoot" href="#"> + New Deals</a>
                     <nav></div>
                </li>
            </ul>
        </div> 

    <!-- The JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            /**
             * the menu
             */
            var $menu = $('#ldd_menu');

            /**
             * for each list element,
             * we show the submenu when hovering and
             * expand the span element (title) to 510px
             */
            $menu.children('li').each(function(){
                var $this = $(this);
                var $span = $this.children('span');
                $span.data('width',$span.width());

                $this.bind('mouseenter',function(){
                    $menu.find('.ldd_submenu').stop(true,true).hide();

                        $this.find('.ldd_submenu').slideDown(300);

                }).bind('mouseleave',function(){
                    $this.find('.ldd_submenu').stop(true,true).hide();
                    $span.stop().animate({'width':$span.data('width')+'px'},300);
                });
            });
        });
    </script>   
</body>

这是我试图添加的代码 enter image description here

 .genesis-nav-menu > .menu-item-has-children > a:after {
        content: "\f140";
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        font: normal 16px/1 'dashicons';
        padding-left: 3px;
        vertical-align: top;
    }

enter image description here

1 个答案:

答案 0 :(得分:0)

检查它对我有用:

&#13;
&#13;
<link href="https://rawgit.com/WordPress/dashicons/master/css/dashicons.css" rel="stylesheet"/>
<div class="genesis-nav-menu">
  <div class="menu-item-has-children"><a href="#">Hello</a></div>
</div>
&#13;
df['Q25']=df[col].apply(lambda x: np.percentile(x, 25) ,axis =1)
#col = ['1', '2','3',..'29'] days in one month
&#13;
&#13;
&#13;