CSS horizontal menu with variable width from parent div - css

Question

I'm trying to create a horizontal menu with the width of the parent div and where the links are arranged in equal distances. Target is to create a navigation bar with a width of 900px. Maybe it is possible to realize it on another way? I'm a newbie in css and don't know how to fix my problem and hope you could help me!
#nav {
background:red;
width:900px;
}
ul#nav-bar, ul#nav-bar ul{
margin:0;
list-style:none;
padding:0;
background: white;
border: 1px solid black;
}
ul#nav-bar ul{
display:none;
position:absolute;
left:0;
}
ul#nav-bar li:hover>*{
display:block;
}
ul#nav-bar li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#nav-bar li:hover{
z-index:1;
}
ul#nav-bar{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0;
*display:inline;
}
* html ul#nav-bar li a{
display:inline-block;
}
ul#nav-bar>li{
margin:0;
}
ul#nav-bar a:active, ul#nav-bar a:focus{
outline-style:none;
}
ul#nav-bar a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font: 12px Arial;
color:#000000;
padding:5px 10px 5px 10px;
}
ul#nav-bar ul li{
float:none;
margin:0 0 0;
}
ul#nav-bar ul a{
text-align:left;
background-color:red;
color:#000;
}
ul#nav-bar li:hover>a{
background-color:#fff;
color:#000000;
}
ul#nav-bar span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
<div id="nav">
<ul id="nav-bar">
<li>Link1</li>
<li><span>Link2</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link3</li>
<li><span>longxxxxxxxxxxxxxxxxxxxxxxxxxxxlink</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link5</li>
<li>Link6</li>
<li>longxxxxxxxxxxxxxlink</li>
</ul>
</div>
Thanks!

Answer 1

To get the #nav-bar to match the parent, simply add width:100% to your existing ul#nav-bar tag in css. This tells your child to fill up the parent, regardless of child's content.
As for spreading out the links, it has been my experience that the best way to do this is to add margins to the text once the navbar is complete. For your coded example, I would add the following to even them out:
ul#nav-bar->li{
margin:0px 20px 0px 20px;
text-align:center;
}

Answer 2

You can view it here and here is the css code
/*zero-height container problem fix for floated elements*/
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
#nav {
background:#999;
width:900px;
}
#nav ul{
list-style: none;
padding: 0;
margin: 0;
}
#nav li{
position: relative;
text-align: center;
padding: 10px 0px;
}
#nav a{
text-decoration: none;
display: block;
color: #f0f0f0;
}
#nav-bar > li{
float: left;
}
#nav-bar ul{
position: absolute;
left: 0;
width: 100%;
top: 100%;
background: #999;
display: none;
}
#nav-bar li:hover{
background: #666;
}
#nav-bar li:hover ul{
display: block;
}
As if you want width to be adjusted to text width in li elements so you need javascript
and here is the code i have updated the jsfiddle
$(document).ready(function(){
total_nav_width = $('#nav').width();
main_link = $('#nav-bar > li > a')
textWidths = [];
totalTextWidth = 0;
main_link.each(function(){
textWidths.push($(this).width())
})
for (var i = 0; i < textWidths.length; i++) {
totalTextWidth += textWidths[i];
}
additionValues = (total_nav_width - totalTextWidth)/main_link.length;
main_link).each(function(){
intialWidth = $(this).width()
$(this).width( intialWidth + additionValues )
})
})