子菜单似乎并没有在正确的位置上对齐。
我的HTML是：
<nav class="nav">
<ul class="menu">
<li><a href="#">HOME</a></li>
<li class="parent"><a href="#">PROFILE</a>
<ul class="children submenu0">
<li><a href="#">SIZE</a>
</li>
<li class="parent"><a href="#">NATURE</a>
<ul class="children submenu1">
<li><a href="#">SMALL</a></li>
<li><a href="#">MEDIUM</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
我的css如下：
.nav{
display: block;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
clear: both;
background-color: #000000;
height: auto;
}
.nav .menu {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
float: left;
}
.nav .menu li {
float: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nav .menu .parent .children{
float: none;
position:absolute;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -50px;
width:auto;
}
.nav .menu .parent .children li{
float:none;
}
.nav .menu .parent .children li a {
display: block;
color:#C0F;
background-color:#0FF;
white-space:nowrap;
}
.nav .menu li a {
color: #fff;
text-decoration: none;
display: block;
float: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nav .menu .parent .children .parent .children {
width:auto;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: none;
position: absolute;
}
.nav .menu .parent .children .parent .children li a{
display:block;
color:#9C0;
background-color:#F03;
white-space:nowrap;
}
当我将submenu1添加到大小时，即使对于大自然，对齐也是错误的，它会重叠，而不是完美地贴合在它旁边。
我如何让它适合自己。
此外，我的css到目前为止还是很复杂，有什么办法可以简化它，所以所有的父元素都表现得很好，所有的子元素都以特定的方式表现而不管深度如何？
答案 0 :(得分：1)
三点可以更好地改善您的子菜单系统
目前，您正在尝试使用边距和填充来抵消菜单，但这会很快变得混乱，因为除非您明确设置它们（丑陋），否则您无法保证宽度。您应该使用与position，top，right和bottom相关联的left属性。此策略涉及将父级设置为position:relative。默认的position属性为“静态”＃39;当您将其设置为relative时，该元素将保留在文档＆＃34;文档流程＆＃34;并继续占用空间。
关键优势在于，当您将子元素设置为position:absolute时，该元素相对于父元素定位。例如父母拥有position:relative（或static以外的任何属性，默认设置），并且拥有position:absolute的孩子，您可以将孩子设置为top:100%和{ {1}}。这会将该元素的左上角设置在父级左下角的正下方。 left:0从文档流中取出元素，因此它也不会占用任何空间。
position:absolute<nav>
<ul>
<li><a href="#">parent</a></li>
<li><a href="#">parent</a></li>
<li>
<a href="#">parent width child</a>
<ul>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
</ul>
</li>
<li><a href="#">parent</a></li>
</ul>
</nav>
您需要使用替换。这就是你如何绕过整个凌乱的CSS。如果你看一下你想要做什么，你的根子菜单的操作方式与子子菜单不同。子菜单的左上角与父级的左下角对齐。子子菜单的左上角将与其父级的右上角对齐。使用/* reset padding and margin where necessary etc. */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/* just some quick demo styles for color whatnot */
nav {
background: black;
color: white;
}
nav ul ul {
background: #555;
}
nav ul ul ul {
background: #999;
}
nav a {
color: white;
white-space:nowrap;
}
nav a:hover {
background: #f80;
}
/* important functional styles */
nav > ul:after {
/* clear the float */
content:'';
clear:both;
display: block;
}
nav li {
/* for the topmost level we want them to float. will be overridden */
float:left;
}
nav li a {
/* always apply padding and display block to the a. better user experience. */
display:block;
padding: 10px;
}
nav li ul li {
/* overridden floating here */
float: none;
}
/* here is where all the positioning takes place */
nav li {
position:relative;
}
nav li ul {
position:absolute;
left: 0; /* for top most level lets align to the left */
top: 100%; /* and have it at the bottom of the parent */
}
属性很容易。
position<nav>
<ul>
<li><a href="#">parent</a></li>
<li><a href="#">parent</a></li>
<li>
<a href="#">parent width child</a>
<ul>
<li><a href="#">child</a></li>
<li><a href="#">child</a></li>
<li>
<a href="#">child with children</a>
<ul>
<li><a href="#">grand child</a></li>
<li><a href="#">grand child</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">parent</a></li>
</ul>
</nav>
虽然这点上有点没有实际意义，但我认为值得一提。如果您无法轻松使用替换，并且您不希望某个元素的子项继承某个样式，请使用...
nav li ul li ul {
left: 100%; /* for grandchild level lets align to the right of the list item */
top: 0; /* and have it at the top of the parent li */
}
选择器修饰符。这样它只适用于适当的父元素。
>答案 1 :(得分：0)
你能看一下：jsFiddle。
我更新了CSS，重要的css更新行是：
.nav .menu .parent .children .parent .children {
width:auto;
margin-top: 0px;
margin-left: 20px;
}