Question

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

大小的所有搜索都不起作用。有人能告诉我怎么做吗？

下面是我的代码

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

.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>

Answer 1

您在寻找css：font-size: value;吗？例如：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>

Answer 2

这是你的罪魁祸首：

.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 
}

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

2 个答案: