Hello, I am new to both html and stack overflow. Please forgive me if this question has already been asked, as I couldn't find anything (but maybe I didn't search enough?). I have tried using overflow and clear properties, but I am struggling to make it work. Any guidance in the right direction would be greatly appreciated.
My issue is with my dropdown menu where I want to prevent list elements from being pushed below other elements when resizing my browser window. Instead, I want them to be cut off with overflow hidden. I attempted setting overflow: hidden in the ribbon element, which solves one problem but creates another as the dropdown elements are also considered overflow and no longer appear on hover.
Here is a link to a fiddle;
Below is the code snippet:
<DOCTYPE !html>
<style>
.image
{
position: absolute;
top:50px;
left:8px;
z-index: 3;
}
.bannerback
{
top: 0px;
left: 0px;
postion: absolute;
z-index: -1;
margin: 0;
overflow: hidden;
}
...
</style>
<body bgcolor = "black">
...
</div>
</body>
...
</html>