Html 我的子菜单与导航不对齐

Html 我的子菜单与导航不对齐,html,css,Html,Css,导航主菜单{ 位置:固定; z指数:5; 宽度:1300px; 最高:0%; 文本对齐:居中; } #顶置导航{ 高度:85px; 背景:rgba(29,15,6,0.7); 宽度:1300px; } #logotop img{ 浮动:左; 边缘顶部:5px; } 导航#主#顶部菜单a{ 文字装饰:无; 文本缩进:-9999px; 颜色:#fff; } 导航#主#顶部菜单li{ 显示:块; 字体大小:1.2米; 填充:1em; 字号:900; 字体系列:'排序磨坊古迪',“小姐Mincho”,衬

导航主菜单{ 位置:固定; z指数:5; 宽度:1300px; 最高:0%; 文本对齐:居中; } #顶置导航{ 高度:85px; 背景:rgba(29,15,6,0.7); 宽度:1300px; } #logotop img{ 浮动:左; 边缘顶部:5px; } 导航#主#顶部菜单a{ 文字装饰:无; 文本缩进:-9999px; 颜色:#fff; } 导航#主#顶部菜单li{ 显示:块; 字体大小:1.2米; 填充:1em; 字号:900; 字体系列:'排序磨坊古迪',“小姐Mincho”,衬线; 文本对齐:居中; 高度:3em; 显示:表格单元格; 垂直对齐:中间对齐; /*边框:实心1px#fff*/ } 导航#主#顶部菜单ul{ 显示:内联块; 高度:85px; 盒影:0.25px rgba(0,0,0,0.3); 背景:rgba(29,15,6,0.7); 过滤器:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#7E7E7E7E',EndColorStr='#7E7E7E7E')*/ } 导航#主#顶部菜单li:悬停{ 边框底部:4px实心#cd4650; } 导航#主#顶部菜单a:悬停{ 颜色:#cd4650; } /*----下拉菜单----*/ 导航#主#顶部菜单ul{ 显示:无; 位置:固定; 顶部:88px; 高度:61px; 填充:0; 保证金:0; } 导航#主要#顶部菜单ul ul li{ 浮动:无; 显示:块; 高度:20px; 字体大小:正常; 字体系列:'排序磨坊古迪',“小姐Mincho”,衬线; 边框:1px实心rgba(150150,0.1); 盒影:0.25px rgba(0,0,0,0.3); 背景:rgba(29,15,6,0.7); } nav#primary_topmenu ul li:hover>ul{/*当悬停父母时,请让孩子看*/ 显示:块; 填充:0; 保证金:0; } 导航#主要#顶部菜单ul li a:悬停{ 列表样式类型:无; }


我想我已经弄明白了;)

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 
问题似乎是“导航主菜单”中的“padding:1em;”。如你所料。它将列表向右移动了1米

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 
您自己的解决方案不起作用,因为“nav#primary#u topmenu ul li:hover>ul”将边距重置为0并覆盖您的解决方案

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 
所以解决办法很简单。将“左边距:-1em;”添加到“导航主菜单ul li:hover>ul”中,而不是“导航主菜单ul”

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 
PS:我还对移动导航做了一些修改(css的最后一行)

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 
HTML

                <ul>
                     <div id="logotop"><img src="images/coincopy.png">
                     <li>

                      <a class="introduction" href="#primary_topmenu li">Home</a>
                    </li>
                    <li>

                     <a class="background" href="#background">Mission</a>
                    </li>
                    <li>

                      <a class="ira" href="#ira">Fund <br>Placement</a>
                    </li>
                    <li>

                      <a class="corporate" href="#corporate">Corporate <br>Finance</a>
                    </li>
                    <li>

                      <a class="investment" href="#investment">Renewable <br> Energy</a>
                    </li>
                    <li>

                        <a class="consulting" href="#consulting">Team</a>
                        <ul>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu </a></li>
                        </ul>
                    </li>

                     <li>
                    <a class="consulting" href="#consulting">Other <br>Services</a>

                        <ul>

                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu </a></li>

                        </ul>
                    </li>
                    <li>

                    <a class="consulting" href="#consulting">Licenses <br>& Compliance</a>
                    </li>
                    <li>

                        <a class="principal" href="#principal">Connections</a>
                    </li>
                    </div>
                    </ul>
                </nav>
</div> 

请提供一些代码。最好是:)请在此提供代码供我们查看;JSFIDLE是有帮助的,但在我们提供帮助之前,我们肯定需要问题中的代码。谢谢您的快速回答。我现在已经添加了我的代码。