如何將一個子列表項設置爲與css中父列表項不同的高度？

我有一個使用無序列表的導航元素。一些列表項目將具有包含其自己的無序列表的子div，以充當子導航。我的問題是，我有父列表項是一定的高度，但我希望子導航列表項具有動態高度。它在做什麼，但是將所有列表項目設置爲父類型。我該如何解決？如何將一個子列表項設置爲與css中父列表項不同的高度？

Fiddle

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 &amp; Development</li> 
            <li>Graphic Design</li> 
            <li>Game Design &amp; 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; 
}

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"); 
      } 
     }) 
    } 
})

來源

2017-03-08 Robert

使用CSS規則，具有較高的specificity。

例如是這樣的：

div.dropdownnav li { height: 20px }

只會影響子導航列表項。

來源

2017-03-08 23:13:57

不幸的是，子導航部門中的列表元素仍然使用父導航規則。我已經更新了我的問題。 – Robert

@Robert我的答案仍然適用。嘗試給予'div.dropdownnav li'高度。 –

確實如此，並沒有引起重視。如果我希望他們有一個以上的文字行數，那麼該怎麼辦？ – Robert

如何將一個子列表項設置爲與css中父列表項不同的高度？

回答

相關問題