﻿

/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */

/*------------------------------------*\
    NAV
\*------------------------------------*/
.nav {
    list-style: none;
    margin-top: 25px;
}

    .nav li {
        float: left;
        position: relative;
        /*width: 100%;*/
    }
.nav li:hover{
    background-color: #ffbd00;
}
    .nav a {
        display: block;
        text-decoration: none;
    }

        .nav a:hover {
            /*text-decoration: underline;*/
            
        }

    /*--- DROPDOWN ---*/
    .nav ul {
        list-style: none;
        position: absolute;
        left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;) */
        padding: 0px;
    }

        .nav ul li {
            padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
            float: none;
            padding: 5px 10px;
            /*text-transform: uppercase;*/ /* Hepsi büyük harf  */
            background-color: #ffbd00;
            z-index: 2;
        }
        .nav ul li:hover
        {
            background-color: #ffbd00;
        }

        .nav ul a {
            /*white-space: nowrap;*/ /* Stop text wrapping and creating multi-line dropdown items */
      
             }

    .nav li:hover ul { /* Display the dropdown on hover */
        left: 0; /* Bring back on-screen when needed */
    }
    @media screen and (max-width: 768px) {
      .nav li:hover ul { 
        left: -137px;
        }


    .nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
        /*text-decoration: underline;*/
    }

    .nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
        text-decoration: none;
    }

    .nav li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    }
