如何在 html 下拉菜单中减小字体/菜单栏的大小答案

【问题标题】：how to decrease the size of font / menu bar in a html drop down menu如何在 html 下拉菜单中减小字体/菜单栏的大小
【发布时间】：2016-09-22 04:54:51
【问题描述】：

您好，这可能是一个简单的问题。我正在尝试制作一个下拉导航菜单，但不幸的是，此菜单的空间有限，我无法弄清楚如何减小字体大小和菜单大小，以便我可以添加更多选项并使其适合部分。我发现的所有关于减小字体大小和

的搜索

尺寸到目前为止不起作用。有人可以告诉我该怎么做吗？

下面是我的代码

如果这是一个简单的答案，再次抱歉

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.third-level-menu > li {
  height: 30px;
  background: #999999;
  width: 190px;
}
.third-level-menu > li:hover {
  background: #CCCCCC;
}
.second-level-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
}
.second-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-level-menu > li {
  position: relative;
  float: left;
  height: 30px;
  /*width: 220px;*/
  background: #999999;
}
.top-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu li:hover > ul {
  /* On hover, display the next level's menu */
  display: inline;
}
/* Menu Link Styles */

.top-level-menu a
/* Apply to all links inside the multi-level menu */

{
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
  /* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}

<ul class="top-level-menu">
  <li><a href="#">Reporting </a>
    <ul class="second-level-menu">
      <li><a href="#">test1</a>
      </li>
      <li><a href="#">test2</a>
      </li>
      <li><a href="#">test3</a>
      </li>
      <li><a href="#">test4</a>
      </li>
    </ul>


  </li>
  <li><a href="#">Process Optimization</a>
  </li>
  <li>
    <a href="#">Operations </a>
    <ul class="second-level-menu">
      <li><a href="#">Access </a>
      </li>
      <li><a href="#">exit</a>
      </li>
      <li>
        <a href="#">Support</a>
        <ul class="third-level-menu">
          <li><a href="#">Anniversary Letters</a>
          </li>
          <li><a href="#">authorizations</a>
          </li>
          <li><a href="#">Documentation</a>
          </li>
          <li><a href="#">Tasks</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Compliance</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Connect Site</a>
  </li>
</ul>

【问题讨论】：

所以将字体大小从 14px 减小到更小的值是行不通的？
您考虑过使用引导程序吗？这对你来说是一个选择吗？它具有响应性，可让您下拉到移动/有限宽度设备上的汉堡菜单。 getbootstrap.com

标签： html css menu

【解决方案1】：

这是你的罪魁祸首：

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}

不要使用速记版本（但通常更可取），请使用：

.top-level-menu a /* Apply to all links inside the multi-level menu */
    {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10px;
    ..etc 
}

【讨论】：

【解决方案2】：

您在寻找 css：font-size: value; 吗？
eksample：font-size: 10px; 或 font-size:0.7em;

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.third-level-menu > li {
  height: 30px;
  background: #999999;
  width: 190px;
}
.third-level-menu > li:hover {
  background: #CCCCCC;
}
.second-level-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
}
.second-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-level-menu > li {
  position: relative;
  float: left;
  height: 30px;
  /*width: 220px;*/
  background: #999999;
}
.top-level-menu > li:hover {
  background: #CCCCCC;
}
.top-level-menu li:hover > ul {
  /* On hover, display the next level's menu */
  display: inline;
}
/* Menu Link Styles */

.top-level-menu a
/* Apply to all links inside the multi-level menu */

{
  /*CHANGE THE VALUE HERE:*/
  font: bold 0.7em Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
  /* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}

<ul class="top-level-menu">
  <li><a href="#">Reporting </a>
    <ul class="second-level-menu">
      <li><a href="#">test1</a>
      </li>
      <li><a href="#">test2</a>
      </li>
      <li><a href="#">test3</a>
      </li>
      <li><a href="#">test4</a>
      </li>
    </ul>


  </li>
  <li><a href="#">Process Optimization</a>
  </li>
  <li>
    <a href="#">Operations </a>
    <ul class="second-level-menu">
      <li><a href="#">Access </a>
      </li>
      <li><a href="#">exit</a>
      </li>
      <li>
        <a href="#">Support</a>
        <ul class="third-level-menu">
          <li><a href="#">Anniversary Letters</a>
          </li>
          <li><a href="#">authorizations</a>
          </li>
          <li><a href="#">Documentation</a>
          </li>
          <li><a href="#">Tasks</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Compliance</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Connect Site</a>
  </li>
</ul>

【讨论】：