DropDown Positioning absolute element outside of the relative parent container - css

Question

I'm using ReactJs and Emotion, but I know the problem is related to my CSS
I have a Header structure
main (
sidebar
content
)
That's why I'm having trouble positioning an <ul> tag correctly with position absolute and this error happens:
problem gif:
I know it is related to the position: relative of my components or my page structure I already tried everything and I couldn't solve it
basically i need my <ul> dropdown to be next to my sidebar like this:
My JSX:
const Tags = () => {
const [menuItems, setMenuItems] = useState(SideBarTags);
const showHideDropItem = tag => {
setMenuItems(items =>
items.map(item => ({
...item,
Active:
item.Name === tag.Name ? (tag.Active === true ? false : true) : false
}))
);
};
return (
<SideBar.MenuList>
{menuItems.map((item, index) => (
<SideBar.ListItem>
<SideBar.ListWrap>
<a>
<item.Icon size={24} />
<span className="li-name">{item.Name}</span>
</a>
</SideBar.ListWrap>
{item.DropdownItems && (
<SideBar.ClosedStyled>
{item.DropdownItems.map(item => (
<li className="li-closed" key={item.Name}>
<FaGhost size={18} />
<a onClick={() => console.log(item.Name)}>{item.Name}</a>
</li>
))}
</SideBar.ClosedStyled>
)}
</SideBar.ListItem>
))}
</SideBar.MenuList>
);
};
export default function App() {
return (
<Global.Container>
<Header.NavBar>
<Header.LogoSide>
<img src={Logo} alt="elo Ghost" />
</Header.LogoSide>
<div style={{ width: "100%", background: "#eee" }} />
</Header.NavBar>
<Global.Main>
<SideBar.SideBodyWrap>
<SideBar.DashMenu>
<Tags />
</SideBar.DashMenu>
</SideBar.SideBodyWrap>
<Content>a</Content>
</Global.Main>
</Global.Container>
);
}
my CSS in Js:
import styled from "#emotion/styled/macro";
import { shade } from "polished";
import { css } from "#emotion/core";
// Global Containers
const Container = styled.div`
height: 100%;
`;
const Main = styled.div`
display: flex;
height: calc(100% - 55px);
position: relative;
z-index: 0;
`;
// Global Containers
export const Global = {
Container,
Main
};
// header Nav
export const NavBar = styled.div`
height: 55px;
background: #3c8dbc;
display: flex;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
z-index: 1;
`;
export const LogoSide = styled.div`
display: flex;
background: red;
justify-content: center;
background: #3c8dbc;
padding: 10px;
width: 100%;
max-width: 250px;
height: 55px;
img {
height: 35px;
transition: all 0.2s ease;
}
`;
// header Nav
export const Header = {
NavBar,
LogoSide
};
// SideBar
const SideBodyWrap = styled.nav`
overflow-y: auto;
height: 100%;
max-width: 250px;
width: 100%;
color: #009688;
background: #3c8dbc;
transition: all 0.2s ease;
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, 0.4);
}
`;
const MenuList = styled.ul`
font-family: "Ubuntu";
font-size: 14px;
font-weight: 300;
text-decoration: none;
color: #fff;
padding-top: 10px;
`;
export const ListItem = styled.li`
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
position: relative;
`;
export const ListWrap = styled.div`
padding: 12px 20px 12px 20px;
display: flex;
transition: all 0.5s cubic-bezier(0, 1, 0, 1);
justify-content: center;
align-items: center;
a {
display: flex;
align-items: center;
svg {
margin-right: 15px;
transition: all 0.5s cubic-bezier(0, 1, 0, 1);
}
}
& .icon-li {
margin-right: 10px;
}
& .down-up_svg,
.li-name {
display: none;
}
`;
export const ClosedStyled = styled.ul`
${ListItem}:hover & {
max-width: 400px !important;
max-height: 400px !important;
}
max-height: 0px !important;
overflow: hidden;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
left: 70%;
font-weight: 400;
position: absolute;
padding: 0px;
z-index: 2;
background: ${shade(0.4, "#3c8dbc")};
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
& .li-closed {
white-space: nowrap;
padding: 10px 20px;
:hover > svg {
color: orange;
}
svg {
margin-right: 10px;
}
}
a {
font-family: "Ubuntu";
font-size: 14px;
font-weight: 300;
text-decoration: none;
color: #8aa4af;
}
`;
const DashMenu = styled.div`
display: flex;
flex-direction: column;
`;
export const SideBar = {
SideBodyWrap,
DashMenu,
ClosedStyled,
ListItem,
ListWrap,
MenuList
};
// SideBar
export const Content = styled.div`
height: 100%;
width: 100%;
background: #eee;
`;
example:
https://codesandbox.io/s/cranky-hamilton-oy47v?file=/src/App.js
and :
https://oy47v.csb.app/

Answer 1

If I'm understanding what you're wanting to achieve correctly, I was able to do it by removing overflow-y:auto from .sidebodywrap and changing left:70% to left:100% in .closedstyled