Question

我只使用CSS处理导航栏和下拉菜单。

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

这里的最终目标是将子菜单保持在各种窗口大小的相关位置。将子菜单对齐到更大的元素并不能解决问题，因为子菜单相对于.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;
}

导航菜单中的对齐方式

1 个答案: