Make vertical dropdown same width as main menu - html

Question

I tried to make a dropdown submenu (in this case 'Products') which has the same width as the mainmenu. The hover/active background colour should cover the entire width of the menu. It seems to be confined to stay within the above laying table.
Is there a way to expand towards the borders as well?
html,
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainmenu li:hover .submenu {
display: inherit;
max-height: 200px;
line-height: 25px;
}
.submenu {
overflow: hidden;
max-height: 0;
width: 100%;
-webkit-transition: all 0.5s ease-out;
}
.easyflexMenu {
width: 150px;
height: 500px;
float: left;
color: #ffffff;
background-color: #229dfc;
border-radius: 5px;
/*bolling van de hoeken*/
padding: 10px;
}
.easyflexMenu a {
margin: -10px;
padding: 10px 10px 5px 15px;
width: 145px;
height: 50px;
display: block;
text-decoration: none;
line-height: 25px;
color: #ffffff;
background-color: #229dfc;
}
.easyflexMenu a:active {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
.easyflexMenu a:hover {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.easyflexMenu ul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
list-style-type: none;
}
ul,
menu,
dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
<div id="efmainmenu" class="easyflexMenu">
<nav class="navigation">
<ul class="mainmenu">
<li class="home">Home</li>
<li class="about">About</li>
<li class="products">Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li class="contact">Contact us</li>
</ul>
</nav>
</div>

Answer 1

I've made the CSS a little bit smaller and in this example you have a fix height of the submenu.
You could use jQuery's animate to solve it without a fix height of the submenu
.navigation ul {
display: inline-block;
margin: 0px;
padding: 0px;
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.navigation ul > li {
display: block;
margin: 0px;
padding: 0px;
width: 170px;
min-height: 65px;
line-height: 65px;
}
.navigation ul > li a {
display: block;
height: 100%;
padding: 0px 15px;
line-height: inherit;
text-decoration: none;
color: #fff;
background-color: #229dfc;
}
.navigation ul > li a:active,
.navigation ul > li a:hover {
background-color: #114e7e;
}
.navigation ul > li .submenu {
display: inherit;
height: 0px;
overflow: hidden;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.navigation ul > li a:active + .submenu,
.navigation ul > li a:hover + .submenu,
.navigation ul > li .submenu:active,
.navigation ul > li .submenu:hover {
height: 195px;
}
<div id="efmainmenu" class="easyflexMenu">
<nav class="navigation">
<ul class="mainmenu">
<li class="home">Home</li>
<li class="about">About</li>
<li class="products">Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li class="contact">Contact us</li>
</ul>
</nav>
</div>
Update: Elements below .submenu should not jump
Just add a position: absolute and z-index: 50 to the .navigation ul > li .submenu like this example
.navigation ul {
display: inline-block;
margin: 0px;
padding: 0px;
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.navigation ul > li {
position: relative;
display: block;
margin: 0px;
padding: 0px;
width: 170px;
min-height: 65px;
line-height: 65px;
}
.navigation ul > li a {
display: block;
height: 100%;
padding: 0px 15px;
line-height: inherit;
text-decoration: none;
color: #fff;
background-color: #229dfc;
}
.navigation ul > li a:active,
.navigation ul > li a:hover {
background-color: #114e7e;
}
.navigation ul > li .submenu {
position: absolute;
display: inherit;
height: 0px;
overflow: hidden;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 50;
}
.navigation ul > li a:active + .submenu,
.navigation ul > li a:hover + .submenu,
.navigation ul > li .submenu:active,
.navigation ul > li .submenu:hover {
height: 195px;
}
<div id="efmainmenu" class="easyflexMenu">
<nav class="navigation">
<ul class="mainmenu">
<li class="home">Home</li>
<li class="about">About</li>
<li class="products">Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li class="contact">Contact us</li>
</ul>
</nav>
</div>

Answer 2

The simple solution should be to make the UI as responsive as possible by ignoring the use of properties such as negative margin, fixed width until and unless required without no way around.
Also always reset default CSS margin and padding for every element in the beginning which is helpful to remove the white space around the elements and around the page.
I have modified your CSS a bit. If you still think it requires more width or space, try adding padding on the anchor element instead of fixed width to .easyflexMenu.
//Resetting the CSS
* {
margin: 0px;
padding: 0px;
}
//ENDS
html,
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainmenu li:hover .submenu {
display: inherit;
max-height: 200px;
line-height: 25px;
}
.submenu {
overflow: hidden;
max-height: 0;
width: 100%;
-webkit-transition: all 0.5s ease-out;
}
.easyflexMenu {
height: 500px;
float: left;
color: #ffffff;
background-color: #229dfc;
border-radius: 5px;
}
.easyflexMenu a {
/*margin: -10px;*/
padding: 10px 10px 5px 15px; //Change this if you want more width.
width: 145px;
height: 50px;
display: block;
text-decoration: none;
line-height: 25px;
color: #ffffff;
background-color: #229dfc;
}
.easyflexMenu a:active {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
.easyflexMenu a:hover {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.easyflexMenu ul {
/*margin: 0px;
padding: 0px;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
list-style-type: none;
}
ul,
menu,
dir {
display: block;
/*list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;*/
}