如何减少html下拉菜单中字体/菜单栏的大小
嗨，这可能是个简单的问题。我试图做一个下拉导航菜单，但不幸的是，这个菜单的空间将是有限的，我有困难，找出如何减少字体大小和菜单大小，以便我可以添加更多的选项，并使它适合在该部分。我发现的所有关于缩小字体大小的搜索
- 到目前为止，尺寸不起作用。有人能告诉我怎么做吗？ 下面是我的代码 如果这是一个简单的答案，请再次表示歉意。
.第三级菜单{位置:绝对；顶部: 0；右：-150 li；宽度:150 li；列表样式:无；填充: 0；边距: 0；显示:无；}.三级菜单>li{高度:30 li；背景：#999999；宽度:190 li；}.第三级菜单>li:悬停{背景：#CCCCCC；}.二级菜单{位置:绝对；顶部:30 li；左: 0；宽度:150 li；列表样式:无；填充: 0；空白: 0；显示: 0；}.二级菜单> li {位置:相对；高度:30 li；背景：#999999；}.二级菜单>li:悬停{背景：#CCCCCC；}..top级别菜单{列表样式:无；填充: 0；边距:0；}；}..top级别菜单>李:相对位置；浮点数:左侧；高度:30 li；/*width: 220 ul；*/背景：#999999；}..top级菜单>li:悬停{背景：#CCCCCC；}..top级菜单li:悬停>ul{ /* On悬停，显示下一个级别的菜单*/ display:内联；} /*菜单链接样式*/ ..top级别-菜单a /*应用于多级菜单*/{字体:粗体14 display，Helvetica，sans-serif；颜色：#FFFFFF；文本-装饰:无；填充:0 0 0 10 the；/*使链接覆盖整个列表项-容器*/显示:块；行高:30 the；}..top级菜单a:悬停{颜色：#000000；}
回答 2
Stack Overflow用户
发布于 2016-05-24 20:12:14
这是你的罪魁祸首：
.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
}Stack Overflow用户
发布于 2016-05-24 20:11:14
你在找css：font-size: value;吗？
or样本：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>
https://stackoverflow.com/questions/37422683
复制相似问题
腾讯云开发者
