更改css下拉子菜单字体大小答案

【问题标题】：change css dropdown sub menu font size更改css下拉子菜单字体大小
【发布时间】：2016-11-09 03:53:27
【问题描述】：

我一直在寻找答案，但没有运气。我有一个下拉菜单，我希望子菜单的字体更小。我可以得到它的一部分来改变大小，但在悬停时我很确定它继承了导航栏的样式。当我更改导航栏上的大小时，子菜单字体大小会更改，但导航栏悬停也会更改，这不好。我在样式表中尝试了几种变通方法，但似乎没有什么可以超越导航栏。

现在我有以下工作：

<li class="dropdown">
   <a class="page-scroll dropdown-toggle" data-toggle="dropdown" href="#">Christy Lodge<span class="glyphicon glyphicon-menu-down"></span></a>
 <ul class="dropdown-menu">
   <li><a href="#">View Our Rooms</a></li>
         <li><a href="#">Room Request Form</a></li>
         <li><a href="#">Map-Christy Lodge</a></li>
           <li><a href="#">Policies/Procedures</a></li>
          </ul>
      </li>

页面网址在：

http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html

这是最后一个菜单项。我希望子菜单字体为 10 像素，悬停也为 10 像素。

我相信我会接近解决这个问题，但非常感谢任何帮助。非常感谢。 -贝丝

【问题讨论】：

你尝试了什么？你能给出一些你认为应该可以工作但不能成功的 CSS 吗？

标签： html css twitter-bootstrap

【解决方案1】：

看看你的css，这样的东西应该可以工作：

.navbar-default .nav .dropdown-menu li a,
.navbar-default .nav .dropdown-menu li a:hover {
    font-size: 10px;
}

【讨论】：

你好马可 - 谢谢！那工作得很好。我不确定这是如何工作的，但我认为这与添加适用于控制导航栏元素的 CSS 有关吗？
问题是选择器.navbar-default .nav li a:hover, .navbar-default .nav li a:focus 比您使用的选择器更具体。看看这个developer.mozilla.org/en/docs/Web/CSS/Specificity
太棒了。谢谢马尔科。这是有道理的。

【解决方案2】：

向所有内容添加类是一种很好的做法 - 特别是如果您想在不重构 HTML 的情况下更改 CSS。

但您可以像这样定位子菜单：

.dropdown li { font-size: 12px; }

这针对嵌套在.dropdown 中的所有li。还有一些其他的选择器也非常有用。查看Lobotomized Owl 以获得更大的列表，但这是直接相关的：

li > li：以li 为目标，该li 是另一个的直接子代（不是嵌套在下面两层或更多层的li，例如孙代或其他）。

【讨论】：