Html 我的子菜单与导航不对齐
导航主菜单{ 位置:固定; 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:悬停{ 列表样式类型:无; }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”,衬
-
-
-
-
-
-
-
-
-
我想我已经弄明白了;)
<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是有帮助的,但在我们提供帮助之前,我们肯定需要问题中的代码。谢谢您的快速回答。我现在已经添加了我的代码。