0

我的菜单向右扩展了一点，我找不到原因。我是编码新手。

如果我将#nav ul ul 位置设置为相对位置，它会扩展菜单单元格，如果我将其设置为绝对位置，我不会这样做，但菜单会出现在下一个菜单单元格下。

这是我的 .HTML

<div id="navWrap">
        <div id="nav">
            <ul>
                <li><a href="#" class="smoothScroll">Home </a>&nbsp;&nbsp;</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/

谢谢你，约瑟夫

4

2 回答 2

3

设置#nav li { position: relative; }和#nav ul ul { left: 0; }

示例：http: //jsfiddle.net/tHUWc/2/

于 2013-09-18T10:22:05.377 回答
0

您是否尝试过使用浮动。我通过浮动固定“向右扩展”#nav

请参阅此示例http://jsfiddle.net/monnoval/tHUWc/3/

于 2013-09-18T10:26:42.160 回答