javascripthtmlcssfrontendsidebar
how to make the expanded part come to the same height of the others?
I m trying to make a html css page with a expanding item list on side. I need expanded part also to be equally same verticle position as the figma design image
body {
margin: 0;
padding: 0;
}
/* Navbar styles */
.navbar {
display: flex;
flex-direction: column;
background-color: #6BA1FF;
margin-top: 0;
padding: 0;
}
.contactLine, .logoLine {
display: flex;
margin: 0;
}
.contactLine h5 {
margin-right: 20px;
}
.logoLine img {
margin: 0;
margin-bottom: 2px;
}
#logo{
width: 160px;
height: 50px;
}
#searchBar {
width: 350px;
height: 40px;
margin-left: 20px;
border-radius: 15px;
border: none;
}
#searchButton{
width: 50px;
height: 42px;
border: none;
background-color: #274E91;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
top: 4px;
right: 54px;
z-index: 999;
}
.search{
position: relative;
left: 280px;
}
#loginRegBtn{
background-color: #6BA1FF;
border: none;
position: relative;
left: 350px;
font-size: x-large;
}
/* Sidebar styles */
#sidebar {
width: 200px;
position: absolute;
top: 102px;
background-color: whitesmoke;
box-shadow: rgba(0, 0, 0,0.6);
border-radius: 10px;
}
#sidebar ul {
position: relative;
list-style-type: none;
}
#sidebar ul li a {
display: flex;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.00em;
text-transform: capitalize;
color: #757576;
text-decoration: none;
padding: 10px 30px;
height: 30px;
transition: 0.1s ease;
}
#sidebar ul li a:hover {
background:#757576;
color: rgb(56, 141, 251);
}
#sidebar ul ul {
position: absolute;
left: 165px;
width: 200px;
top: 0;
display: none;
background: whitesmoke;
box-shadow: 3px 3px 10px rgba(0, 0,0, 0.1);
border-radius: 20px;
}
#sidebar ul .dropdw {
position: relative;
}
#sidebar ul .dropdw:hover ul {
display: initial;
}<div class="navbar">
<div class="contactLine">
<h5>Call us for web and orders: 076 4881254</h5>
<h5>Email: [email protected]</h5>
</div>
<div class="logoLine">
<img src="logo.png" alt="logo" id="logo">
<div class="search">
<input type="text" placeholder="Search...." id="searchBar">
<button id="searchButton"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 50 50"
style="fill:#FFFFFF;">
<path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"></path>
</svg></button>
<button id="loginRegBtn" ><i>login/register</i></button>
</div>
</div>
</div>
<div id="sidebar">
<nav >
<ul>
<li class="dropdw"><a href="">A/L Division</a>
<ul>
<li><a href="">Science/Maths Stream</a></li>
<li><a href="">Commerce Stream</a></li>
<li><a href="">Art Stream</a></li>
<li><a href="">Technology Stream</a></li>
<li><a href="">Common Stream</a></li>
</ul>
</li>
<li class="dropdw"><a href="">O/L Division</a>
<ul>
<li><a href="">Grade 10</a></li>
<li><a href="">Grade 11</a></li>
<li><a href="">O/L Exam</a></li>
</ul>
</li>
<li class="dropdw"><a href="">Intermediate Division</a>
<ul>
<li><a href="">Grade 9</a></li>
<li><a href="">Grade 8</a></li>
<li><a href="">Grade 7</a></li>
<li><a href="">Grade 6</a></li>
</ul>
</li>
<li class="dropdw"><a href="">Primary Division</a>
<ul>
<li><a href="">Grade 1/2</a></li>
<li><a href="">Grade 3/4/5</a></li>
<li><a href="">Scholarship Exam</a></li>
</ul>
</li>
<li class="dropdw"><a href="">Common Division</a>
<ul>
<li><a href="">Entertainment</a></li>
<li><a href="">General Knowledge</a></li>
<li><a href="">Excercise Book</a></li>
<li><a href="">Other Books</a></li>
</ul>
</li>
</ul>
</nav>
</div>I expect to get expanding elements also to be on same verticle position as first level of elements (Al ,Ol), As the second image i shown
Solution
You should remove position: relative; in <li>. Let it be in the parent <ul>. And add min-height: auto; to the child <ul>.
Your code is pretty dirty, so I fixed almost nothing:
body {
margin: 0;
padding: 0;
}
/* Navbar styles */
.navbar {
display: flex;
flex-direction: column;
background-color: #6BA1FF;
margin-top: 0;
padding: 0;
}
.contactLine, .logoLine {
display: flex;
margin: 0;
}
.contactLine h5 {
margin-right: 20px;
}
.logoLine img {
margin: 0;
margin-bottom: 2px;
}
#logo{
width: 160px;
height: 50px;
}
#searchBar {
width: 350px;
height: 40px;
margin-left: 20px;
border-radius: 15px;
border: none;
}
#searchButton{
width: 50px;
height: 42px;
border: none;
background-color: #274E91;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
top: 4px;
right: 54px;
z-index: 999;
}
.search{
position: relative;
left: 280px;
}
#loginRegBtn{
background-color: #6BA1FF;
border: none;
position: relative;
left: 350px;
font-size: x-large;
}
/* Sidebar styles */
#sidebar {
width: 200px;
position: absolute;
top: 102px;
background-color: whitesmoke;
box-shadow: rgba(0, 0, 0,0.6);
border-radius: 10px;
}
#sidebar ul {
position: relative;
list-style-type: none;
margin: 0;
padding:0;
}
#sidebar ul li a {
display: flex;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.00em;
text-transform: capitalize;
color: #757576;
text-decoration: none;
padding: 10px 30px;
height: 30px;
transition: 0.1s ease;
}
#sidebar ul li a:hover {
background:#757576;
color: rgb(56, 141, 251);
}
#sidebar ul ul {
position: absolute;
left: 100%;
width: 200px;
top: 0;
display: none;
background: whitesmoke;
box-shadow: 3px 3px 10px rgba(0, 0,0, 0.1);
border-radius: 20px;
min-height:100%;
}
#sidebar ul .dropdw {
/* position: relative; */
}
#sidebar ul .dropdw:hover ul {
display: initial;
}<div class="navbar">
<div class="contactLine">
<h5>Call us for web and orders: 076 4881254</h5>
<h5>Email: [email protected]</h5>
</div>
<div class="logoLine">
<img src="logo.png" alt="logo" id="logo">
<div class="search">
<input type="text" placeholder="Search...." id="searchBar">
<button id="searchButton"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 50 50"
style="fill:#FFFFFF;">
<path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"></path>
</svg></button>
<button id="loginRegBtn" ><i>login/register</i></button>
</div>
</div>
</div>
<div id="sidebar">
<nav >
<ul>
<li class="dropdw"><a href="">A/L Division</a>
<ul>
<li><a href="">Science/Maths Stream</a></li>
<li><a href="">Commerce Stream</a></li>
<li><a href="">Art Stream</a></li>
<li><a href="">Technology Stream</a></li>
<li><a href="">Common Stream</a></li>
</ul>
</li>
<li class="dropdw"><a href="">O/L Division</a>
<ul>
<li><a href="">Grade 10</a></li>
<li><a href="">Grade 11</a></li>
<li><a href="">O/L Exam</a></li>
</ul>
</li>
<li class="dropdw"><a href="">Intermediate Division</a>
<ul>
<li><a href="">Grade 9</a></li>
<li><a href="">Grade 8</a></li>
<li><a href="">Grade 7</a></li>
<li><a href="">Grade 6</a></li>
</ul>
</li>
<li class="dropdw"><a href="">Primary Division</a>
<ul>
<li><a href="">Grade 1/2</a></li>
<li><a href="">Grade 3/4/5</a></li>
<li><a href="">Scholarship Exam</a></li>
</ul>
</li>
<li class="dropdw"><a href="">Common Division</a>
<ul>
<li><a href="">Entertainment</a></li>
<li><a href="">General Knowledge</a></li>
<li><a href="">Excercise Book</a></li>
<li><a href="">Other Books</a></li>
</ul>
</li>
</ul>
</nav>
</div>- window.scroll smooth not working on Safari
- How to change hover color for Ant Design v5 Button with Tokens in React?
- Detect route change inside inner/partial component (VueRoute 3 in Nuxt 2.14)
- Shrink DIV to text that's wrapped to its max-width?
- How to get the querystring parameters with Astro
- Wrap Text In JavaScript
- ${} template literal (ES2015) conflict with JSP Expression Language syntax
- Can I call a function in a useState and use its data
- Single page applications and <form> elements
- How can I have dynamic 'primary' classes in TailwindCSS?
- How can I prevent constant re-rendering of an MUI `DataGrid` on row commit?
- Three.js concave shape from point cloud
- error with reauthenticateWithCredential get error TypeError: credential._getReauthenticationResolver is not a function (firebase 9)
- webpack's compile time is very slow
- Why is instanceof operator considered safer than the constructor property in determining object type?
- Is it bad practice to pass block level constants as arguments into a function?
- How do I replace the dot with a comma and round the value to two decimals?
- changing text of element only when condition is fullfiled
- How to fix this jump effect after the text animation?
- can't open modal through button in php
- display input box value when triggered by button click
- Is it possible to PUT/PATCH a json file located in the public folder of a vite+react project?
- Add/remove element in bootstrap grid using jQuery and prevent deleting the first element
- Guaranteed order of updates in Firebase real-time database for multiple paths
- How to block a specified script in Firefox and Chrome
- web-bluetooth get stored data from device GATT
- How to use MutationObserver?
- MondoDB/Mongoose query response is too slow
- Extract ip and uag from Cloudflare cdn-cgi/trace text result using regex in JS
- Javascript mutation observer adressing an element within a <li>