You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:如何修改https://community.entermedschool.com/网站下拉菜单字体及实现内容单行完整显示

Fixing Primary Header Dropdown Menu Styles

Hey there! Let’s work through those dropdown menu tweaks you’re trying to implement. Your initial code snippets are heading in the right direction, but we need to refine the selectors and add a few extra properties to override the site’s default theme styles, which are likely taking precedence.

1. Increase Dropdown Item Font Size & Set Font Weight to 400

Your original selector (#primary-menu *) is too broad and might not be targeting the actual text elements (usually anchor tags inside menu items) with enough specificity. Try this more targeted approach:

/* Target links within primary dropdown menus */
#primary-menu .sub-menu li a {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6; /* Optional: Improves vertical spacing for readability */
}

This directly targets the anchor tags inside dropdown list items, ensuring your font styles override any default theme styles applied to menu links.

2. Auto-Adjust Dropdown Width to Avoid Text Ellipsis

The width: fit-content property is correct, but many themes enforce fixed widths, text truncation, or line-wrapping on dropdown menus. Add these properties to fully disable truncation and let the menu expand to fit content:

/* Make dropdown menu expand to fit its content */
#primary-menu .sub-menu {
  width: fit-content !important; /* Overrides any fixed width set by the theme */
  min-width: auto; /* Resets theme-enforced minimum width */
  padding-right: 1rem; /* Optional: Adds extra padding on the right for cleaner spacing */
}

/* Prevent text from wrapping onto new lines */
#primary-menu .sub-menu li {
  white-space: nowrap;
}

/* Disable text truncation (ellipsis) */
#primary-menu .sub-menu li a {
  text-overflow: unset;
  overflow: visible;
}

Troubleshooting Tip

If the styles still don’t apply, open your browser’s DevTools (F12), inspect a dropdown menu item, and check the "Styles" tab to see which theme styles are overriding your custom CSS. You can then make your selectors more specific (e.g., add header#masthead before #primary-menu) instead of relying on !important.

内容的提问来源于stack exchange,提问作者Karthik Nandula

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.29 19:04:07