0
私は、順序付けられていないリストを使用するnav要素を持っています。リストアイテムの中には、サブナビゲーションとして機能するために、順序付けられていないリストを含む子divがあるものがあります。私の質問は、私は特定の高さの親リスト項目を持っているが、私はサブナビゲーションリストの項目は、動的な高さをしたい。それがやっていることは、すべてのリストアイテムを親スタイリングに設定することです。これをどうやって解決するのですか？子リスト項目をcssの親リスト項目と異なる高さに設定するにはどうすればよいですか？
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");
}
})
}
})
`
残念ながら、サブナビゲーション部門のリスト要素は、引き続き親navルールを使用しています。私は私の質問を更新しました。 – Robert
@ロバート私の答えはまだ適用されます。 'div.dropdownnav li'に高さを与えてみてください。 –
実際、それは注意を払っていませんでした。複数のテキスト行がある場合、それらを特定の高さにしたい場合はどうすればよいですか？ – Robert