如何制作导航菜单
[英]How to make a navigation menu
问题描述
I want to make a navigation menu for my website, but it doesn't work.
我想为我的网站制作一个导航菜单，但它不起作用。 Here is the code I actually have这是我实际拥有的代码
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> I want to make the li point not visible.我想让 li 点不可见。
4 个解决方案
解决方案1
0 2019-02-17 14:03:57
use CSS property, list-style-type: none;使用 CSS 属性， list-style-type: none; in nav > ul > li .在nav > ul > li 。 Hope this works!希望这有效！
解决方案2
0 2019-02-17 14:08:50
Inline CSS :内联 CSS ：
<li style="list-style-type: none;">
Or select the Ul with any class name you prefer.或者选择带有您喜欢的任何类名的 Ul。 Here i used 'menu' as a class of ul.在这里，我使用“菜单”作为 ul 类。
.menu li{
list-style-type: none;
}
解决方案3
0 2019-02-17 15:31:26
Add CSS property:添加 CSS 属性：
a {text-decoration: none;}, nav li:hover{background: yellow;}, nav li{list-style-type: none;padding: 10px; background: red; float: left;}
Result after applying the CSS:应用CSS后的结果：
Hope it works fine.希望它工作正常。 You can refer at https://www.w3schools.com/css/css_navbar.asp你可以参考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.