html - How to fix the alignment of the dropdown menu in a navigation -
so i'm doing website... want dropdown navigati http://forever21.com can't seem fix mine.... it's overlapping whole navigation div. please help! here's code:
` 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 { 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 { 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>
`
can lend me help, know... such petty problem until still can't find right logic behind these navigation dropdowsn huhuhu.
thanks!
you want start with.
position: absolute;
absolute brings element outside flow of document.
Comments
Post a Comment