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: bt@bt.com</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: bt@bt.com</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>- ENOLOCK npm ERR! Error while running npm audit fix
- javascript onsubmit not working
- Embed image in email body nodemailer nodejs
- Detect Back Button in Navigation Guards of Vue-Router
- Error: Could not access built-in Node.js modules
- Failed to execute removeChild on Node
- Error: Cannot find module 'node:util' while running the nuxt project using npm run command
- Recharts issue with gaps between Bars
- google closure compiler - double compilation
- Which library should I use for server-side image manipulation on Node.JS?
- Stop propagation of 'click' event in Leaflet
- Creating new objects from frozen parent objects
- How to redirect to an "about:" URL
- How to convert FormData (HTML5 object) to JSON
- dynamically pass unknown number of parameters to react router
- What is the difference between a comparison operator and a logical operator?
- How to convert date to timestamp?
- Context Provider Specification
- Get previous page phonegap javascript
- Displaying date/time in user's timezone - on client side
- Google App Script to imitate File - Import csv file into a sheet using a custom menu item
- Intl.NumberFormat alter minus symbol
- Loading data server side and allow global access client side
- Set default value of Javascript object attributes
- Vue3 @update:modelValue NOT working on objects?
- Failed to resolve component: google-pay-button
- Vue.js 3 - instance without a component?
- When to use const with objects in JavaScript?
- Vue.js iterate complex object by data key
- Vuejs 3 query value in Json Object based on key