.a { font-family: "microsoft yahei"; }
        .b { font-weight: bold; }


        <!---->
        #container {
                width: 1000px;
                height: 700px;

        }

        #photo {
                width: 1000px;
                animation: switch 12s ease-out infinite;
                animation-delay: 9s;
        } 


        #photo > img {
                float: left;
                width: 1000px;
                height: 700px;
        }

        @keyframes switch {
                0%   , 12.5% { margin-left: 1000px; }
                12.5%, 25%   { margin-left: 0px; }
                25%  , 37.5% { margin-left: 0px; }
                37.5%, 50%   { margin-left: -1000px; }
                50%  , 62.5% { margin-left: -1000px; }
                62.5%, 75%   { margin-left: -2000px; }
                75%  , 100%  { margin-left: -2000px; }
        }



        a:link, a:visited {
                text-decoration: none;
                color: Black;
        }

	.toGrey a:hover {
		color:DimGrey;
	}
	


        .sp_posi {
                //top: 108%;
                position: absolute;
                width: 1000px;
                height: 700px;
                overflow: hidden;
        }




        <!-- -->
        #container1 {
                width: 1000px;
                height: 700px;
        }



        #photo1 {
                width: 1000px;
                animation: switch 12s ease-out infinite;
                animation-delay: 6s; 

        } 


        #photo1 > img {
                float: left;
                width: 1000px;
                height: 700px;
        }

        <!---->
        #container2 {
                width: 1000px;
                height: 700px;
        }



        #photo2 {
                width: 1000px;
                animation: switch 12s ease-out infinite;
                animation-delay: 3s;
        } 


        #photo2 > img {
                float: left;
                width: 1000px;
                height: 700px;
        }

        <!---->
        #container3 {
                width: 1000px;
                height: 700px;
        }



        #photo3 {
                width: 1000px;
                animation: switch 12s ease-out infinite;
                animation-delay: 0s;
        } 


        #photo3 > img {
                float: left;
                width: 1000px;
                height: 700px;
        }

        body
        .P {
                animation-duration: 5s;
                animation-name: "slidein";
                animation-iteration-count: infinite;
        }

        .footer {
                text-align = "center";
        }


        .singlecellround2 {
                border-radius: 5px;
        }



        .dropbtn {
                padding: 10px;
                border: none;
                cursor: pointer;
                background-color: White;
        }

        .dropdown {
                position:relative;
                display: inline-block;
        }

        .dropdown-content {
                display: none;
                position: absolute;
                background-color: White;
                width:320%;
                box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index:11;
        }

        .dropdown-content a {
                color:black;
                padding: 0px;    
                text-decoration: none;
                display: GhostWhite;
        }

        .dropdown-content a:hover {
                background-color: Salmon;
        }

        .dropdown:hover .dropdown-content {
                display: block;
        }

        .dropdown:hover  .dropbtn {
                background-color: White;
        }