Set #nav li { position: relative; }
and #nav ul ul { left: 0; }
Example: http://jsfiddle.net/tHUWc/2/
Question
My menu is expanding a little to the right, and i can't find the cause. I am new to coding.
If i put the #nav ul ul position to relative, it expands the menu cell, if i put it to absolute i doesn't do that, but the menu appears under the next menu cell.
this is my .HTML
<div id="navWrap">
<div id="nav">
<ul>
<li><a href="#" class="smoothScroll">Home </a> </li>
<li><a href="#" class="smoothScroll">Meniu 1</a>
<ul>
<li><a href="#">Sm1.1</a></li>
<li><a href="#">Sm1.2</a></li>
<li><a href="#">Sm1.3</a></li>
</ul>
</li>
<li><a href="#" class="smoothScroll">Meniu 2 </a>
<ul>
<li><a href="#">Sm2.1</a></li>
<li><a href="#">Sm2.2</a></li>
<li><a href="#">Sm2.3</a></li>
</ul>
</li>
<li><a href="#" class="smoothScroll">Meniu 3 </a>
<ul>
<li><a href="#">Sub meniu 3.1</a></li>
<li><a href="#">Sub meniu 3.2</a></li>
<li><a href="#">Sub meniu 3.3</a></li>
</ul>
</li>
<li><a href="#" class="smoothScroll">Meniu 4 </a>
<ul>
<li><a href="#">Sub meniu 4.1</a></li>
<li><a href="#">Sub meniu 4.2</a></li>
<li><a href="#">Sub meniu 4.3</a></li>
</ul>
</li>
<li><a href="#" class="smoothScroll">Meniu 5 </a>
<ul>
<li><a href="#">Sub meniu 5.1</a></li>
<li><a href="#">Sub meniu 5.2</a></li>
<li><a href="#">Sub meniu 5.3</a></li>
</ul>
</li>
<li><a href="#" class="smoothScroll">Meniu 6 </a>
<ul>
<li><a href="#">Sub meniu 6.1</a></li>
<li><a href="#">Sub meniu 6.2</a></li>
<li><a href="#">Sub meniu 6.3</a></li>
</ul>
</li>
</ul>
<br class="clearleft"/>
</div>
</div>
and this is my .CSS
#navWrap {
height:30px;
background:#0d364c;
margin:0px;
padding:0px;
width:705px;
}
#nav {
padding:5px;
margin:0px;
background:#0d364c;
height:25px;
font-size:15px;
width:700px;
}
#nav ul {
margin: 0px;
padding: 0px ;
list-style: none;
position: relative;
display: block;
}
#nav ul:after {
content: "";
clear: both;
display: block;
}
#nav li {
padding:5px 0px;
background-color: #0d364c;
margin: 0 0 0 0;
color: #FFF;
list-style-type: none;
border-right: 1px solid #fff;
display:inline;
font-family:sans-serif;
height:30px;
width:70px;
}
#nav li:last-child{
border-right:none;
}
#nav li a {
color: #FFF;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
background:#577283;
}
#nav ul ul {
display:none;
border-radius: 0px;
padding: 2px;
position: absolute;
height:30px;
background:black;
top:30px;
}
#nav ul li:hover>ul{
display:inline-table;
float:none;
}
#nav ul li:hover{
background:#577283;
}
#nav ul ul li {
position: relative;
float:none;
border:0px;
padding:0px;
width:70px;
}
#nav ul ul li a {
display: block;
text-decoration: none;
height:40px;
width:70px;
color: white;
background:gray;
text-align:center;
padding: 5px;
margin: 1px;
}
here is my JsFiddle http://jsfiddle.net/tHUWc/
Thank you, Iosif
Solution
Set #nav li { position: relative; }
and #nav ul ul { left: 0; }
Example: http://jsfiddle.net/tHUWc/2/
OTHER TIPS
Have you tried using float. I fixed the "expanding to the right" by floating the #nav
See this example http://jsfiddle.net/monnoval/tHUWc/3/