html 横向滚动菜单栏,带子菜单的HTML水平滚动导航栏

我有一个内部网页,它有一个大的导航栏,如果用户有一个小型监视器,导致子菜单显示在屏幕之外。我的想法是使用导航栏滚动,但是当我使用CSS中的溢出时,当子菜单打开时会出现垂直滚动条。我希望子菜单显示包含导航栏的div的OUTSIDE。我愿意接受所有想法,包括必要时重新整理我的网页。带子菜单的HTML水平滚动导航栏

样本HTML是:

而且我使用的CSS是(我发现这W3schools.com CSS):

div.scrollmenu {

background-color: #333;

overflow: auto;

white-space: nowrap;

width: 50%;

}

div.scrollmenu a {

display: inline-block;

/*color: white;*/

text-align: center;

padding: 14px;

text-decoration: none;

}

div.scrollmenu a:hover {

background-color: #777;

}

我遇到的问题是,在为了得到滚动条,我必须使用CSS中的overflow:auto设置。但是当我这样做时,它会导致子菜单出现在同一个div中,导致在显示子菜单时出现垂直滚动条。如果没有溢出设置,子菜单将显示在所需行为的div之外;但是,当然,滚动条不会出现。

请帮忙。

仅供参考,我准备在周末回家,并在周一跟进。

在此先感谢。

+0

你为什么不使用媒体查询? –

+0

好主意,但我不会跑遍同一个问题,除非我完全重新编写了小屏幕导航栏? –

+0

您是否正在制作移动友好的内联网页?如果没有,那么您对此有多少更小的屏幕? –

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值