Make styling override another style when applying it to a tag

Question

I would like to style my dropdown text size smaller (15px) but since its in my tag it styles to my other nav styling. I attempted to make classes but it doesnt seem to change anything, and if it does it goes to the default unstyled nav. (Purple and underlined)

My Header markup:

<header>
        <div>
            <?php
                    if (isset($_SESSION['userId'])) {
                        echo "

                    <div class='dropdown' style='float:right;'>
                        <li class='login'><a href='#'>Welcome</a>
                            <div class='dropdown-content'>
                                <ul>
                                    <li style='font-size:15px;'><a href='#'>My Account</a></la>
                                    <li style='font-size:15px;'><a href='#'>My Orders</a></la>
                                    <li style='font-size:15px;'><a href='#'>My Wishlist</a></la>
                                    <li style='font-size:15px;'><a href='#'>My Cart</a></la>
                                    <li style='font-size:15px;'><a href='./includes/logout.inc.php?logout-submit'>Logout</a></li>
                                </ul>
                            </div>
                        </li>
                    </div>

                        ";
                    }
                    else{
                        echo "<li class='login'><a href='login.php'>Login / Sign up</a></li>";
                    }
            ?>

        </div>
        <div class="container">
            <div id="branding">
                <h1><a href="index.php" title="Home"><img src="./Header Image/header.png"></a></h1>
            </div>
            <nav>
                <ul id="nav">
                    <li class="current"><a href="index.php">Home</a></li>
                    <li><a href="apple.php">Apple</a></li>
                    <li><a href="samsung.php">Samsung</a></li>
                    <li><a href="gadgets.php">Gadgets</a></li>
                </ul>
            </nav>
        </div>
</header>

And my header styling:

/* Header */
header{
    background: #35424A;
    color: #FFFFFF;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #FF3B3F 5px solid;
}

header ul a{
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 24px;
}

header li{
    float: left;
    display: inline;
    padding: 0px 20px 0px 20px;
}

header #branding{
    float: left;
}

header #branding h1{
    margin: 0;
}

header nav{
    float: right;
    margin-top: 25px;
    margin-right: 100px;
}

header .highlight, header .current a{
    color: #FF3B3F;
    font-weight: bold;
}

header .current2 a{
    color: #FF3B3F;
}

header a:hover{
    color: #CCCCCC;
}

.login a{
    color: #FFFFFF;
    text-decoration: none;
    float: right;
}

.login {
    color: #FFFFFF;
    text-decoration: none;
    float: right;
    margin-top: -10px;
    margin-right: 10px;
}

Is there a way to make my downdown text size smaller?

Drop down code:

<div class='dropdown' style='float:right;'>
     <li class='login'><a href='#'>Welcome</a>
         <div class='dropdown-content'>
               <ul>
                   <li style='font-size:15px;'><a href='#'>My Account</a></la>
                   <li style='font-size:15px;'><a href='#'>My Orders</a></la>
                   <li style='font-size:15px;'><a href='#'>My Wishlist</a></la>
                   <li style='font-size:15px;'><a href='#'>My Cart</a></la>
                   <li style='font-size:15px;'><a href='./includes/logout.inc.php?logout-submit'>Logout</a></li>
               </ul>
         </div>
     </li>
</div>

Answer 1

If i understood your problem correctly, you can only style the immediate li of the dropdown content in this way:

header .dropdown > li > .dropdown-content > ul > li {
     font-size: 15px;
}

> will make sure the style is applied to direct child only, not any nested children inside it