Question

entity

到目前为止，这是我的代码;它做了一个单一级别的下拉但我尝试通过做同样的事情来添加第二个级别以获得第一个下拉并且它不会工作。它是一个学校项目，我已经研究了如何添加第二级，但到目前为止我没有尝试过任何帮助，所以如果你们可以给我任何建议，或告诉我需要添加的东西让它工作我会喜欢它。谢谢！

Answer 1

首先你需要修复你的html代码，标记中有几个错误，你可以检查这是否是所需的菜单，在你的代码示例中注意你在每个子菜单打开ul之前关闭li元素，这是一个错误，ul需要在里面，在ul之后你应该关闭父李。

a {
	color: #FFF;
}


nav {
	margin: 50px 0;
	background-color: #E64A19;
}

nav ul {
	padding: 0;
  margin: 0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #E64A19;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}

	
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

<nav>
    <ul>
        <li><a href="#">What is it?</a></li>
        <li>
            <a href="#">Inventory</a>
            <ul>
                <li>
                    <a href="#">X-box 360</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decorations</a></li>
                        <li><a href="#">Redstone &amp; Transportation</a></li>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Tools, Weapons &amp; Armor</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">PC</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decoration Blocks</a></li>
                        <li><a href="#">Redstone</a></li>
                        <li><a href="#">Transportation</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                        <li><a href="#">Foodstuff</a></li>
                        <li><a href="#">Tools</a></li>
                        <li><a href="#">Combat</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Materials</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Mobile</a>
                    <ul>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Tools &amp;amp; Weapons</a></li>
                        <li><a href="#">Decoration Blocks</a></li>
                        <li><a href="#">Building Blocks</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">PS4</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decorations</a></li>
                        <li><a href="#">Redstone &amp; Transportation</a></li>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Tools, Weapons &amp; Armor</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

如果您不需要两个第一项，那么您需要从第一个ul提取到单个ul。

您需要一部分css代码来格式化此菜单。你可以在这里查看和示例https://codepen.io/andornagy/pen/xhiJH

将第二级下拉导航栏添加到1级

1 个答案: