Question

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

现在我有以下工作：

<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

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

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

Answer 1

看看你的CSS，这样的事情应该有效：

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

Answer 2

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

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

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

这会定位嵌套在li内的所有.dropdown。还有一些其他选择器也非常有用。查看Lobotomized Owl以获取更大的列表，但这是立即相关的：

li > li：定位一个li，它是另一个孩子的直接孩子（不是嵌套在下面两个或更多层次的孩子 - 比如，孙子或其他什么）。

更改css下拉菜单字体大小

2 个答案: