如何制作導航菜單
[英]How to make a navigation menu
問題描述
我想為我的網站制作一個導航菜單，但它不起作用。 這是我實際擁有的代碼
body{ margin: 0px; padding: 0px; } nav > ul{ margin: 0px; padding: 0px; } nav > ul > li{ float: left; } nav li{ list-style-type: none; }
<nav> <ul> <li class="mnav"><a href="main.html">Acceuil</a></li> <li class="mnav"><a href="bio.html">Biographie</a></li> <li class="mnav"><a href="folio.html">Portfolio</a></li> <li class="mnav"><a href="contact.html">Contact</a></li> </ul> </nav>我想讓 li 點不可見。
4 個解決方案
解決方案1
0 2019-02-17 14:03:57
使用 CSS 屬性， list-style-type: none; 在nav > ul > li 。 希望這有效！
解決方案2
0 2019-02-17 14:08:50
內聯 CSS ：
<li style="list-style-type: none;">
或者選擇帶有您喜歡的任何類名的 Ul。 在這里，我使用“菜單”作為 ul 類。
.menu li{
list-style-type: none;
}
解決方案3
0 2019-02-17 15:31:26
添加 CSS 屬性：
a {text-decoration: none;}, nav li:hover{background: yellow;}, nav li{list-style-type: none;padding: 10px; background: red; float: left;}
應用CSS后的結果：
希望它工作正常。 你可以參考https://www.w3schools.com/css/css_navbar.asp
解決方案4
0 已采納 2019-02-17 16:51:16
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #fcfcfc; color: #fcfcfc; font-family: sans-serif; } .nav { padding: 5px; background-color: #333; } .nav-brand { display: inline-block; float: left; font-size: 20px; } .nav-items { display: inline-block; float: right; list-style: none; } .nav-item { float: left; display: inline-block; padding: 5px; } .nav-item:hover { color: orange; } .nav::after { display: table; content: ''; clear: both; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nav Bar</title> </head> <body> <ul class="nav"> <div class="nav-brand"> Brand </div> <div class="nav-items"> <li class="nav-item">Home</li> <li class="nav-item">About</li> <li class="nav-item">Blog</li> <li class="nav-item">News</li> </div> </ul> </body> </html>
如何使導航菜單滾動？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.