Question

所以我正在做一个网站...我想要一个下拉导航像http://forever21.com，但我似乎无法修复我的......它与整个导航div重叠。请帮忙！这是我的代码：

` nav li .first { border-right：left：1px dotted #ddd; }

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}


nav ul {
list-style: none outside none;
position: relative;
display: inline-table;
margin-top: -18px;
margin-left: 31px;
}
nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
list-style: none outside none;
display: inline;
color: rgb(68, 68, 68);
border-right: 1px dotted rgb(221, 221, 221);
font-size: 20pt;
font-family: "Questrial",arial,sans-serif;
padding: 20px 17px 10px 20px;
margin-top: -17px;
}

nav ul li:hover {
background: #4b545f;
color: #fff;
}

nav ul li a {
list-style: none outside none;
display: inline;
letter-spacing: 2px;
font-size: 11px;
text-transform: uppercase;
color: #444444;
padding-top:20px;
}

nav ul ul li {
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; 
display: block;
position: relative;
}

nav ul ul li a {
color: #000;
}   


nav ul ul li a:hover {
background: #4b545f;
}






HTML:

<nav>
<ul>
<li><a href="http://tiniglesias.shericaocbania.org/about">About <img src="http://icons.iconarchive.com/icons/visualpharm/ios7/16/arrow-down-4-icon.png" width="9" /> </a>
<ul>
<li class="sub" ><a href="#">ABOUT ME</a></li>
<li class="sub" ><a href="#">F.A.Q</a></li>
<li class="sub" ><a href="#">PRESS</a></li>
</ul></li>
<li><a href="http://tiniglesias.shericaocbania.org">Blog <img src="http://icons.iconarchive.com/icons/visualpharm/ios7/16/arrow-down-4-icon.png" width="9" />  </a>
<ul>
<li><a href="#">ART & DESIGN</a></li>
<li><a href="#">BEAUTY</a></li>
<li><a href="#">D-I-Y & TUTORIAL</a></li>
<li><a href="#">FASHION & STYLE</a></li>
<li><a href="#">LIFESTYLE</a></li>
<li><a href="#">TRAVEL</a></li>

</ul>
</li>
<li><a href="http://tiniglesias.shericaocbania.org/shop">Shop </a></li>
</ul>
</nav>

`

有人可以借给我一个帮助，我知道......这是一个小问题，但到目前为止仍然无法找到这些导航背后的正确逻辑huhuhu。

谢谢！

Answer 1

你可能想要开始。

position: absolute;

绝对将元素带到文档流之外。

如何修复导航中下拉菜单的对齐方式

1 个答案: