My website is currently hosted on a test server at medexcel.comeze.com.
However, I am encountering an issue where the overflow of the top div is no longer hidden when I hover over a menu button in the top bar. This results in the bottom right corner of the red menu button being visible.
How can I go about resolving this problem?
The CSS for the top section is as follows:
#top{
@include green-gradient;
border-radius: 0px 0px 50px 50px;
box-shadow: 10px 10px rgb(56, 56, 56);
overflow: hidden;
}
And for the menu section:
.myButton{
@include red-button;
border-radius:50px 0px 50px 50px;
text-shadow:0px 1px 0px #810e05;
float:right;
}
In terms of HTML structure:
<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>