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

Question

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

` 导航 .first{ border-right:left: 1px 虚线 #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;

Absolute 将元素置于文档流之外。