我有一个使用无序列表的导航元素。一些列表项将有一个子 div，包含它自己的无序列表，作为子导航。我的问题是，我让父列表项具有一定的高度，但我希望子导航列表项具有动态高度。它正在做的是将所有列表项设置为父样式。我该如何解决这个问题？
HTML
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<section id="main">
<header>
<div id="logo"></div>
<nav>
<ul class="mainnav">
<li>Home</li>
<li>Studios
<div class="dropdownnav hidden">
<ul>
<li>Web Design & Development</li>
<li>Graphic Design</li>
<li>Game Design & Development</li>
<li>Game Production</li>
</ul>
</div>
</li>
<li>Meet the Team
<div class="dropdownnav hidden">
<ul>
<li>Team 1</li>
<li>Team 2</li>
<li>Team 3</li>
<li>Team 4</li>
</ul>
</div>
</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<article>
<p>Hi</p>
</article>
</section>
<script src="scripts/main.js"></script>
</body>
</html>
CSS
html{
font-size: 1em;
color: rgb(0, 0, 0);
}
body{
margin: 0;
padding: 0;
}
@media(max-width: 1280px){
html{
font-size: 0.9em;
}
}
section{
margin-top: 1%;
box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.25);
background-color: rgba(155, 155, 155, 0.5);
}
header{
padding-bottom: 1%;
height: 75px;
border-bottom: 1px solid black;
}
header, article{
width: 100%;
}
nav{
float: left;
margin: 2% 0;
width: 80%;
height: 100%;
}
.mainnav{
list-style: none;
}
.mainnav li{
display: inline-block;
float: left;
margin: 0 1%;
padding: 0.75%;
width: 20%;
color: rgb(255, 255, 255);
text-align: center;
cursor: pointer;
border-radius: 10px;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(123, 3, 3);
}
.mainnav li:hover{
background-color: rgb(77, 77, 77);
}
div.dropdownnav{
position: relative;
top: 10px;
left: 0;
width: 100%;
background-color: green;
z-index: 5;
}
div.dropdownnav ul{
margin: 0;
padding: 0;
height: 100%;
list-style: none;
background-color: blue;
}
div.dropdownnav li{
clear: both;
margin-top: 2%;
cursor: pointer;
width: 95%;
border: none;
}
.hidden{
display: none;
}
.showing{
display: block;
}
#main{
margin-left: 25%;
margin-right: 25%;
}
#logo{
display: inline-block;
float: left;
width: 20%;
height: 100%;
background-image: url("../images/aimlogo.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
JS
window.onload = (function(){
let mainNav = document.getElementsByClassName("mainnav");
let mainNavElement = document.getElementsByTagName("li");
let hiddenClass = document.getElementsByClassName("hidden");
console.log(this.innerWidth);
for(let i = 0; i < mainNavElement.length; i++){
mainNavElement[i].addEventListener("mouseover", function(){
console.log(i);
let dropDownNav = this.getElementsByClassName("dropdownnav")[0];
if(dropDownNav.classList.contains("hidden")){
dropDownNav.classList.remove("hidden");
dropDownNav.classList.add("showing");
}
else{
dropDownNav.classList.remove("showing");
dropDownNav.classList.add("hidden");
}
let dropDownNavElement = this.getElementsByTagName("li");
for(let j = 0; j < dropDownNavElement.length; j++){
console.log(dropDownNavElement[j]);
}
})
mainNavElement[i].addEventListener("mouseout", function(){
let dropDownNav = this.getElementsByClassName("dropdownnav")[0];
if(dropDownNav.classList.contains("showing")){
dropDownNav.classList.remove("showing");
dropDownNav.classList.add("hidden");
}
})
}
})
`
最佳答案
关于html - 如何将子列表项设置为与 css 中的父列表项不同的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42683612/