css - 导航菜单中的对齐方式

Question

我正在使用 CSS 制作导航栏和下拉菜单。

我试图根据父元素 .dropdown 对齐子菜单。当我在任何父容器上使用 position:relative 以便我可以添加 position:absolute 子元素时，开始发生非常奇怪的格式化事情。

---

/* Nav */

header nav {
	float: right;
	margin-top: 43px;
	    border-style: solid;
	border-color: black;
	
	}
	

	
	header nav li {
		display: inline;
		margin-left: 50px;
		
		}
		
	    header nav li a {
		color: black;
		transition-property: color;
		transition-duration: .2s;
	    }
	     	
	    header nav li a:hover {
		color: orange;
			    }
		
/* DROPDOWN MENU */


.dropdown {
	
}
.drop-nav {
    position:absolute;
    display:none;
    border-style: none;
    border-color:black;
    padding:10px;
    padding-right: 30px;
    left:40%;
    margin-top: 5px;
    background-color: grey;
    color:white;
}
.drop-nav li{
    margin-left:20px;
}

.dropdown:hover .drop-nav {
    display:block;
}

<header>
            <h1>
                <img src="logo.jpg" alt="coffeeology" />
            </h1>
            <nav>
                <ul class="main-nav">
                        <li><a href="#" title="home">Home</a></li>
                        <li><a href="#" title="about us">About Us</a></li>
                        <li class="dropdown"><a href="#" title="menu">Menu</a>
                            <ul class="drop-nav">
                                <li>Beverages</li>
                                <li>Breakfast Items</li>
                                <li>Brunch</li>
                                <li>Gelato</li>
                            </ul>
                        </li>
                        <li><a href="#" title="daily specials">Daily Specials</a></li>
                        <li><a href="#" title="contact us">Contact Us</a></li>
                </ul>
            </nav>
        </header>

此处的最终目标是使子菜单在各种窗口大小下都保持在相关位置。将子菜单与更大的元素对齐并不能解决问题，因为子菜单不会相对于 .dropdown 类保持固定。

感谢任何帮助!谢谢。

Answer 1

这是您要找的东西吗？

https://jsfiddle.net/28qmkLsf/

/* DROPDOWN MENU */


.dropdown {
    position: relative;
}
.drop-nav {
    position:absolute;
    display:none;
    border-style: none;
    border-color:black;
    padding:10px;
    padding-right: 30px;
    left:0%;
    top: 100%;
    background-color: grey;
    color:white;
    width: 150px;
}
.drop-nav li{
    margin-left:20px;
    display: block;
}