CSS3/HTML5下拉菜單

一直試圖解決我的代碼幾個小時，我不能。我想讓我的導航欄有一個下拉功能。但我似乎無法讓它工作。CSS3/HTML5下拉菜單

正如你所看到的我已經開始在下拉菜單類，但我不知道從那裏去哪裏。一直在使用Google搜索，並發現了很多例子，試圖複製/粘貼一些位，但沒有好的結果。所以我在想你可能會有幫助。

nav { 
 
    display: block; 
 
    background-color: indianred; 
 
    box-shadow: 0px 10px 5px #888888; 
 
} 
 
nav ul { 
 
    text-align: center; 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
} 
 
nav ul li a { 
 
    width: 125px; 
 
    color: black; 
 
    padding: 20px; 
 
    background-color: blueviolet; 
 
    text-decoration: none; 
 
} 
 
nav ul li a:hover { 
 
    background-color: aqua; 
 
} 
 
.dropdown { 
 
    display: none; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">FORSIDE</a> 
 
    </li> 
 
    <li><a href="#">ERHVERVSUDDANNELSER</a> 
 
     <ul class="dropdown"> 
 
     <li>content 1</li> 
 
     <li>content 1</li> 
 
     <li>content 1</li> 
 
     <li>content 1</li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">EUX</a> 
 
    </li> 
 
    <li><a href="#">HTX</a> 
 
    </li> 
 
    <li><a href="#">OM TECH COLLEGE</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2017-02-09 Nocolay

更改CSS來此：

nav { 
 
    display: block; 
 
    background-color: indianred; 
 
    box-shadow: 0px 10px 5px #888888; 
 
} 
 

 
nav ul { 
 
    text-align: center; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    position:relative; 
 
} 
 

 
nav ul li a { 
 
    width: 125px; 
 
    color: black; 
 
    padding: 20px; 
 
    background-color: blueviolet; 
 
    text-decoration: none; 
 
} 
 

 
nav ul li a:hover { 
 
    background-color: aqua; 
 
} 
 

 
nav ul li ul { 
 
    display:none; 
 
} 
 
nav ul li:hover ul { 
 
    display:block; 
 
    position:absolute; 
 
    background:indianred; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">FORSIDE</a></li> 
 
     <li><a href="#">ERHVERVSUDDANNELSER</a> 
 
     <ul class="dropdown"> 
 
      <li>content 1</li> 
 
      <li>content 1</li> 
 
      <li>content 1</li> 
 
      <li>content 1</li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">EUX</a></li> 
 
     <li><a href="#">HTX</a></li> 
 
     <li><a href="#">OM TECH COLLEGE</a></li> 
 
    </ul> 
 
</nav>

你想隱藏下拉但後來證明它，當你將鼠標懸停在下拉菜單中的父元素。

然後，我讓父母li position:relative;和下拉position:absolute，所以它沒有推動任何其他下拉菜單項，它不應該在任何地方，但沒有給它一個背景色的樣式。

來源

2017-02-09 11:38:47 Albzi

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">News</a></li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropbtn">Dropdown</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </li> 
 
</ul>

的更多詳情，請Dropdown Menu in Navbar

來源

2017-02-09 11:48:54 Shweta

你需要編寫CSS的元素上懸停

像

element1:hover tobeshownele{display:block;}

來源

2017-02-09 11:50:39 narasimhareddy969

你可以嘗試這樣的事情。不想改變太多，所以代碼和用戶界面仍然很混亂。

nav { 
 
    display: block; 
 
    background-color: indianred; 
 
    box-shadow: 0px 10px 5px #888888; 
 
} 
 

 
nav ul { 
 
    text-align: center; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
nav ul li a { 
 
    width: 125px; 
 
    color: black; 
 
    padding: 20px; 
 
    background-color: blueviolet; 
 
    text-decoration: none; 
 
} 
 

 
nav ul li a:hover { 
 
    background-color: aqua; 
 
} 
 

 
.dropdown { 
 
    display: none; 
 
    position: absolute; 
 
} 
 

 
nav ul li:hover .dropdown { 
 
    display: block; 
 
} 
 

 
ul.dropdown li { 
 
    display: block; 
 
    padding: 10px; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">FORSIDE</a></li> 
 
     <li><a href="#">ERHVERVSUDDANNELSER</a> 
 
      <ul class="dropdown"> 
 
      <li><a href="#">content 1</a></li> 
 
      <li><a href="#">content 1</a></li> 
 
      <li><a href="#">content 1</a></li> 
 
      <li><a href="#">content 1</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">EUX</a></li> 
 
     <li><a href="#">HTX</a></li> 
 
     <li><a href="#">OM TECH COLLEGE</a></li> 
 
    </ul> 
 
</nav>

來源

2017-02-09 11:57:00 Vaidas

CSS3/HTML5下拉菜單

回答

相關問題