Adjust gap between menu - html

Question

I'm trying to adjust the spacing(gap) between menu so it'll fit with the navbar.By changing margin doesn't seems to do it. Anyone have idea on how to fix this ? Is it possible to re-position each menu individually ?
Here's the demo
#navbar {
width: 1200px;
height: 180px;
background: url(http://i67.tinypic.com/5cygax.png) no-repeat center center;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
margin-left: 80px;
margin-top: 100px;
}
#menu {
display: inline-block;
margin: 65px 50px 0px 100px;
position: relative;
float: left;
width: 100px;
padding: 0 10px;
border-radius: 8px;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .15);
background: #8495F5;
}
#menu,
#menu ul {
list-style: none;
}
#menu: li {
float: left;
position: relative;
border-right: 1px solid rgba(0, 0, 0, .1);
box-shadow: 1px 0 0 rgba(255, 255, 255, .25);
perspective: 1000px;
}
#menu: li:first-child {
border-left: 1px solid rgba(255, 255, 255, .25);
box-shadow: -1px 0 0 rgba(0, 0, 0, .1), 1px 0 0 rgba(255, 255, 255, .25);
}
#menu a {
display: block;
position: inherit;
z-index: 10;
padding: 15px 20px 15px 20px;
text-decoration: none;
color: rgba(75, 75, 75, 1);
line-height: 1;
font-family: sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.15em;
background: transparent;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
transition: all .25s ease-in-out;
text-align: center;
}
#menu: li:hover>a {
background: #333;
color: rgba(0, 223, 252, 1);
text-shadow: none;
}
#menu li ul {
position: absolute;
left: 0;
z-index: 1;
width: 250px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu li:hover ul {
padding: 5px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0, 0, 0, .5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
#keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}
30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}
#menu li li a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}
#menu li li a:hover {
color: rgba(0, 223, 252, 1);
border-top: dotted 1px rgba(255, 255, 255, .15);
border-bottom: dotted 1px rgba(255, 255, 255, .15);
background: rgba(0, 223, 252, .02);
}
<div id="container">
<div id="navbar">
<ul id="menu">
<li><a class="home" href="#">Home</a></li>
</ul>
<ul id="menu">
<li><a class="register" href="#">Register</a></li>
</ul>
<ul id="menu">
<li><a class="guide" href="#">Guide</a>
<ul>
<li>New Features</li>
<li>Quest & Event Guide</li>
<li>Brigand & T-map Guide</li>
</ul>
</ul>
<ul id="menu">
<li><a class="download" href="#">Download</a>
<ul>
<li>Patch Download</li>
</ul>
</ul>
</div>
</div>

Answer 1

I am guessing you want something like this?
The last lines in the CSS will control each LI position.
SOURCE:
#navbar{
width: 1200px;
height: 180px;
background: url(http://i67.tinypic.com/5cygax.png) no-repeat center center;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
margin-left: 80px;
margin-top: 100px;
}
ul#menu {
display: inline-block;
margin: 65px 0 0px 195px;
position: relative;
width: 800px;
list-style-type:none;
}
ul#menu, ul#menu-sub {
list-style-type: none;
}
ul#menu > li {
padding: 0 10px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
background: #8495F5;
width: 100px;
float: left;
position: relative;
display: inline-block;
border-right: 1px solid rgba(0,0,0,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.25);
border-radius: 8px;
}
#menu li:first-child {
border-left: 1px solid rgba(255,255,255,.25);
box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}
#menu a.menu-top {
display: block;
position: inherit;
z-index: 10;
padding: 15px 20px 15px 20px;
text-decoration: none;
color: rgba(75,75,75,1);
line-height: 1;
font-family: sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.15em;
background: transparent;
text-shadow: 0 1px 1px rgba(255,255,255,.9);
transition: all .25s ease-in-out;
text-align: center;
}
#menu-sub {
position: absolute;
left: 0;
z-index: 1;
width: 250px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu-sub a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
padding: 10px;
display:block;
}
#menu-sub a:hover {
color: rgba(0,223,252,1);
border-top: dotted 1px rgba(255,255,255,.15);
border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);
}
#menu-sub li:hover > a {
background: #333;
color: rgba(0,223,252,1);
text-shadow: none;
}
#menu li:hover #menu-sub {
padding: 5px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
#keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}
30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}
/* controlling each li's position */
ul#menu li:nth-child(1) { /*first */
margin-right: 3%
}
ul#menu li:nth-child(2) { /*first */
margin-right: 200px;
}
ul#menu li:nth-child(3) { /*first */
margin-right: 3%
}
ul#menu li:nth-child(4) { /*first */
margin-right: 0;
}
<div id="container">
<div id="navbar">
<ul id="menu">
<li><a class="menu-top home" href="#">Home</a></li>
<li><a class="menu-top register" href="#">Register</a></li>
<li>
<a class="menu-top guide" href="#">Guide</a>
<ul id="menu-sub">
<li>New Features</li>
<li>Quest & Event Guide</li>
<li>Brigand & T-map Guide</li>
</ul>
</li>
<li>
<a class="menu-top download" href="#">Download</a>
<ul id="menu-sub">
<li>Patch Download</li>
</ul>
</li>
</ul>
</div>
</div>
View Pen: Adjust gap between menu

Answer 2

Changed margin for #menu
#menu {
margin: 65px 0 0px 20px;
}
#navbar {
width: 1200px;
height: 180px;
background: url(http://i67.tinypic.com/5cygax.png) no-repeat center center;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
margin-left: 80px;
margin-top: 100px;
}
#menu {
display: inline-block;
margin: 65px 0 0px 20px;
position: relative;
float: left;
width: 100px;
padding: 0 10px;
border-radius: 8px;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .15);
background: #8495F5;
}
#menu,
#menu ul {
list-style: none;
}
#menu: li {
float: left;
position: relative;
border-right: 1px solid rgba(0, 0, 0, .1);
box-shadow: 1px 0 0 rgba(255, 255, 255, .25);
perspective: 1000px;
}
#menu: li:first-child {
border-left: 1px solid rgba(255, 255, 255, .25);
box-shadow: -1px 0 0 rgba(0, 0, 0, .1), 1px 0 0 rgba(255, 255, 255, .25);
}
#menu a {
display: block;
position: inherit;
z-index: 10;
padding: 15px 20px 15px 20px;
text-decoration: none;
color: rgba(75, 75, 75, 1);
line-height: 1;
font-family: sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.15em;
background: transparent;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
transition: all .25s ease-in-out;
text-align: center;
}
#menu: li:hover>a {
background: #333;
color: rgba(0, 223, 252, 1);
text-shadow: none;
}
#menu li ul {
position: absolute;
left: 0;
z-index: 1;
width: 250px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu li:hover ul {
padding: 5px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0, 0, 0, .5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
#keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}
30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}
#menu li li a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}
#menu li li a:hover {
color: rgba(0, 223, 252, 1);
border-top: dotted 1px rgba(255, 255, 255, .15);
border-bottom: dotted 1px rgba(255, 255, 255, .15);
background: rgba(0, 223, 252, .02);
}
<div id="container">
<div id="navbar">
<ul id="menu">
<li><a class="home" href="#">Home</a></li>
</ul>
<ul id="menu">
<li><a class="register" href="#">Register</a></li>
</ul>
<ul id="menu">
<li><a class="guide" href="#">Guide</a>
<ul>
<li>New Features</li>
<li>Quest & Event Guide</li>
<li>Brigand & T-map Guide</li>
</ul>
</ul>
<ul id="menu">
<li><a class="download" href="#">Download</a>
<ul>
<li>Patch Download</li>
</ul>
</ul>
</div>
</div>