Listed - CSS

/*Landscape*/
/*@media (min-width: 1919px)*/
@media (orientation: landscape)
    {
        body
            {
                background-image: url( wall1.jpg );
            }

        .container
            {
                margin: 80px 0px 0px 560px;
                width: 800px;
                /*height: 800px;
                border: 2px solid white;*/
            }

    }

/*Protrait*/
/*@media (max-width: 1100px)*/
@media (orientation: portrait)
    {
        body
            {
                background-image: url( wall2.png );
          }

        .container
            {
                margin: 80px 0px 0px 80px;
                width: 800px;
                /*height: 800px;
                border: 2px solid white;*/
            }

    }

/*For all the page*/
body
    {
        font-family: "Segoe UI";

    }

a
    {
        text-decoration: none;
        color: #f7f7f7;
    }

.container
    {
        background-color: rgba( 55, 54, 53, 0.5 );
        box-shadow: 3px 3px 5px rgba( 55, 54, 53, 1);
    }

ul
    {
        text-align: center;
    }

li
    {
        list-style-type: none;
        transition: height 1s, opacity 1s, padding 1s, background-color 1s;
        height: 0px;
        opacity: 0;
    }

ul, li
    {
        padding: 0px;
        margin: 0px;
        color: #f7f7f7;
    }

.titulo
    {
        background-color: rgba( 36, 37, 38, 1 );
        transition: all 1s;
        padding: 1.5%;
    }

ul:hover li
    {
        height: 18px;
        opacity: 1;
        padding: 1% !important;
    }

ul:hover .titulo
    {
        background-color: rgba( 48, 50, 51, 1 );
    }

li:hover
    {
        background-color: rgba( 235, 234, 234, 0.5 );
    }