Can't redefine font-size of BootStrap's dropdown-menu class

Question

I'm having the hardest time trying to redefine the font-size of BootStrap's .dropdown-menu class.

The Firefox inspector says it's from .dropdown-menu (inherited from ul), so I tried ul.dropdown-menu, .dropdown-menu but with no luck.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"></div>
        <div id="myMenu" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>First list item</li>
                <li id="my-messages" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages</a>
                    <ul class="dropdown-menu pull-right" aria-labelledby="dLabel" role="menu">
                        <li>Dropdown list item</li>
                        ...

Any advise? Thanks.

Answer 1

Put your bootstrap above and then your regular css file in header. And then write your css in style.css file.

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

Answer 2

Looks like you're using it in conjunction with a nav?

I was able to do this with the nav and a bit of CSS.

BOOTPLY

CSS:

.navbar-nav > li {
  font-size: 20px;
  }
.dropdown-menu {
    font-size: 20px;
  }