Creating nested links in the sidebar navigation bar with CSS has been a challenge for me. While hovering over main links, I can see the sub-links being displayed. However, when I try to hover/click on the children of the sub-links, they disappear.
Note: My experience with SCSS/CSS is very limited, and I'm experimenting with adding some styling to a React app.
Code Sandbox:
https://i.stack.imgur.com/t3395.png
HTML Page
import "./styles/style.css";
function App() {
return (
<>
<header>
<nav>
<div className="logo">
<h1>Logo</h1>
</div>
<div className="nav__links" >
<ul >
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>
</ul>
</div>
<div className="burger">
<button>
<div className="line1"></div>
<div className="line2"></div>
<div className="line3"></div>
</button>
</div>
</nav>
</header>
<div className="main-content-with-side-bar">
<div className="side-bar">
<ul>
<!-- Nested links -->
</ul>
</div>
<div>
<!-- Lorem Ipsum content -->
</div>
</div>
<footer>
<div></div>
</footer>
</>
);
}
export default App;
SCSS
@import "variable";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
// Styles
}
// More SCSS styles