How to make this menu occupy all the remaining space's width? - css

Question

There is a menu :
<div id="divmenuppal"> // this the menu
<ul class="dropdown">
<li class="menuppal">Administration
<ul>
<li>Artificial Turf</li>
<li>
Batting Cages
<ul>
<li>Indoor
<ul>
<li>Garden</li>
</ul>
</li>
<li>Outdoor</li>
</ul>
</li>
<li>Benches & Bleachers</li>
<li>Communication Devices</li>
<li>Dugouts</li>
<li>Fencing & Windscreen</li>
<li><hr></li>
<li>Floor Protectors</li>
<li>Foul Poles</li>
<li>Netting</li>
<li>Outdoor Furniture</li>
<li>Outdoor Signs</li>
<li><hr></li>
<li>Padding</li>
<li>Scoreboards</li>
<li>Shade Structures</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Structure
<ul>
<li>All-in-One Team Cart</li>
<li>Air & Electrical Reels</li>
<li>Field Drags</li>
<li>
Field Marking Equipment
<ul>
<li>Batter's Box Templates</li>
<li>Dryline Markers</li>
<li>Field Paint
<ul>
<li>Garden</li>
</ul>
</li>
<li>Field Sprayers</li>
<li>Stencils</li>
</ul>
</li>
<li>
Field Tarps
<ul>
<li>Area Tarps</li>
<li>Growth Covers / Protectors</li>
<li>Infield Tarps</li>
<li>Tarp Accessories</li>
</ul>
</li>
<li>Hand Tools</li>
<li>
Irrigation, Hoses, Nozzles
<ul>
<li>Hoses & Hose Reels</li>
<li>Irrigation</li>
<li>Nozzles</li>
</ul>
</li>
<li>Layout Tools</li>
<li>Moisture Removal</li>
<li><hr></li>
<li>Mound Fortification</li>
<li>Mowers & Stripers</li>
<li>Soil Management</li>
<li>Soil Amendments</li>
<li>Spreaders & Sweepers</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Exercice
<ul>
<li>
Baseball - Softball
<ul>
<li>Base Accessories</li>
<li>Bases & Home Plates</li>
<li>Game Accessories</li>
<li>Pitching Rubbers</li>
</ul>
</li>
<li>
Batting Practice Equipment
<ul>
<li>Backstops</li>
<li>Infield Screens</li>
<li>Jugs Pitching Machines</li>
<li>Turf Mats</li>
<li>Turf Protectors</li>
<li>Replacement Accessories</li>
</ul>
</li>
<li>
Batting Cages
<ul>
<li>Indoor</li>
<li>Outdoor</li>
</ul>
</li>
<li>
Portable Mounds
<ul>
<li>Batting Practice Mounds</li>
<li>Game Mounds</li>
<li>Practice Mounds</li>
</ul>
</li>
<li>
Football
<ul>
<li>First Down Markers</li>
<li>Football Accessories</li>
<li>Football Goalposts</li>
</ul>
</li>
<li>
Soccer
<ul>
<li>Soccer Goals</li>
<li>Soccer Accessories</li>
</ul>
</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Contribuables et biens
<ul>
<li>Ladders & Sticks</li>
<li>Hurdles</li>
<li>Training Accessories</li>
<li>Smart-Cart Training System</li>
<li>Smart-Hurdle Collection</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Recettes
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Edition
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
<li class="menuppal">Outils
<ul>
<li>Field Design</li>
<li>Turf Management</li>
<li>Training</li>
<li> - VIEW ALL - </li>
</ul>
</li>
</ul>
</div>
<div class="breadcrumbs" style="clear:left;"> // this is the breadcrumbs
<div class="container-fluid">
<ul class="bread">
<li>Accueil</li><li>Gestion des contribuables</li><li><a>Fiche d'un contribuable</a></li>
</ul>
<ul class="bread pull-right">
<li style="color: #000;padding: 5px;font-size: 11px;font-weight: bold;">Fiche d'un contribuable</li>
</ul>
</div>
</div>
The css of the menu :
* {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a {
text-decoration: none;
font-size: 11px;
font-weight: 100;
width: 100%;
box-sizing: border-box;
}
ul {
list-style: none;
}
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
background-color: #40617C;
}
ul.dropdown li:not(.menuppal):not(:first-child):not(:last-child)
{
margin-top: 8px;
margin-bottom: 8px;
}
hr {
margin-left: 6px;
margin-right: 8px;
border-top: 0;
}
/*
LEVEL ONE : MAIN MENU
*/
ul.dropdown {
position: relative;
}
ul.dropdown li.menuppal {
float: left;
zoom: 1;
background: #000 url(../images/menuLight.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-left: 1px solid #222;
}
ul.dropdown li.menuppal a {
display: block;
padding: 4px 8px;
color: #000000;
}
/* Doesn't work in IE */
ul.dropdown li.menuppal:hover {
background: #ccc url('../images/menuDark.png') repeat-x 50% 50%;
position: relative;
}
/*
FIN LEVEL ONE
*/
/*
LEVEL TWO
*/
ul.dropdown ul {
top: 100%;
left: 0;
}
ul.dropdown ul li {
float: none;
position: relative;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown li.menuppal ul li a {
border-right: none;
color: #FFF;
display: inline-block;
}
ul.dropdown li.menuppal ul li a:hover {
background: #07243a;
}
ul.dropdown li.menuppal ul li a:visited {
word-break: break-all;
}
/*
LEVEL THREE
*/
ul.dropdown ul ul {
left: 100%;
top:0!important;
}
/*
LEVEL FOUR
*/
ul.dropdown ul ul ul {
left: 100%;
top:0!important;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
At runtime the menu is not occupying all the horizontal space :
So how to make the menu fill the remaining space like in this image :

Answer 1

ul.dropdown {
background: #000 url(../images/menuLight.png) repeat-x top left;
}

Answer 2

Use flex layout. I add following code to the bottom of your CSS and it did the trick:
#divmenuppal > .dropdown {
display: flex;
}
.dropdown .menuppal:last-child {
flex-grow: 1;
}
http://jsfiddle.net/w2n79nsy/

Answer 3

ok I found it from #SunilDalal's answer :
ul.dropdown {
position: relative;
float: left;
width: 100%;
background: #000 url('menuLight.png') repeat-x top left;
}