div的溢出属性问题答案

【问题标题】：Issue with overflow property of a divdiv的溢出属性问题
【发布时间】：2023-03-22 06:15:01
【问题描述】：

我在 medexcel.comeze.com 的测试服务器上托管了我的网站。

问题是，当我将鼠标悬停在顶部栏中的菜单按钮上时，顶部 div 的溢出不再隐藏，红色菜单按钮的右下角可见。

我该如何解决这个问题？

顶部的 CSS 是：

#top{
    @include green-gradient;
    border-radius: 0px 0px 50px 50px;
    box-shadow: 10px 10px rgb(56, 56, 56);
    overflow: hidden;
}

对于菜单，

.myButton{ 
    @include red-button;
    border-radius:50px 0px 50px 50px;
    text-shadow:0px 1px 0px #810e05;
    float:right;
}

HTML：

<div class="row" id="top">
    <div class="small-8 columns">
        <img src="img/logo.png">
    </div>
    <div class="small-4 columns" id="menu">
        <div class="myButton">Menu</div>
    </div>
</div>

【问题讨论】：

能否请您也添加一些 HTML 代码。
我相信你的问题是浮动。从标准流中删除元素，使其不受“溢出：隐藏”的影响。如果您可以将其定位为内联等，它可能会解决问题
我添加了 HTML @PeterStuart
我尝试删除浮动并将其向右对齐。问题依然存在。
似乎在 Firefox 中运行良好。不过 IE 中的显示都是错误的...

标签： jquery css

【解决方案1】：

将position: static 添加到.myButton。

.myButton{ 
    @include red-button;
    border-radius:50px 0px 50px 50px;
    text-shadow:0px 1px 0px #810e05;
    float:right;
    position:static;
}

【讨论】：

你用的是什么浏览器？我使用 Inspector 在您网站上的 Chrome 中对此进行了测试，效果很好。
尝试关闭检查器并将鼠标悬停在按钮上。