Мое меню немного расширяется вправо, и я не могу найти причину. Я новичок в кодировании.
Если я поместил позицию #nav ul ul в относительную, она расширяет ячейку меню, если я ставлю ее абсолютной, я этого не делаю, но меню появляется под следующей ячейкой меню.
это мой.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>
и это мой.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;
}
вот мой JsFiddle http://jsfiddle.net/tHUWc/
Спасибо, Иосиф
Установите #nav li { position: relative; }
#nav li { position: relative; }
и #nav ul ul { left: 0; }
#nav ul ul { left: 0; }
Пример: http://jsfiddle.net/tHUWc/2/
Вы пробовали использовать float. Я исправил "расширение вправо", плавая #nav
См. Этот пример http://jsfiddle.net/monnoval/tHUWc/3/