How to align horizontal menu links in large resolution screen? - html

Question

I have the horizontal menu. I have two problem with this menu are:
when I resize the browser, it will change to responsive menu.
when I open the page in big resolution screen, menu not came in full screen.
I don't need responsive menu.
How to rectify following things:
Each link should equal width
space between the link name and left/right border should equal.
menu should be 100% width.
My code is here:
<div class="menudiv">
<div class="menu">
<ul>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
<li><img src="img/img1.png" alt="">Link1</li>
</ul>
</div>
</div>
<style>
.menudiv {
width: 94%;
margin:0 3%;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.menu ul ul {
display: none;
margin:4px 0 0 0;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #646464;
margin: 0;
list-style: none;
position: relative;
padding: 0;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
border-right: 1px solid #000;
}
.menu ul li:last-child{
border:none;
}
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 11px 42px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
border-right:none;
}
.menu ul ul li a {
padding: 10px;
color: #000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
text-decoration: none;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
.head {
width: 500px;
height: 200px;
background: #789;
}
.foot {
width: 500px;
height: 200px;
background: #123;
}
</style>

Answer 1

You can use display:table, display:table-row and display:table-cell css properties to get what you wanted to achieve.
CSS:
.menu {
display: table;
width:100%;
}
.menu ul {
list-style:none; margin:0 padding:0;
display:table-row
}
.menu ul li{
display:table-cell;
}
.menu ul li > a {
display:block;
padding:2px 4px;
background:#333;
color:#fff;
text-decoration:none;
}
More customization can be done for this type of css structure also. Fiddle link http://jsfiddle.net/ZnRcY/

Answer 2

You can try this
Working Fiddle here
.menudiv {
width: 94%;
margin:0 3%;
-moz-border-radius: 13px;
-webkit-border-radius: 13px; background: #646464;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-align:center;display:table;
width:100%;
}
.menu ul {
margin: 0;
list-style: none;
position: relative;
padding: 0;
display:table-row;
}
.menu ul li {
display:table-cell;
border-bottom: 3px solid transparent;
border-right: 1px solid #000;
}
Good Luck...