Question

我想为我的网站创建一个导航菜单，但是它不起作用。这是我实际拥有的代码

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>

我想使锂点不可见。

Answer 1

使用CSS属性list-style-type: none;中的nav > ul > li。希望这行得通！

Answer 2

内联CSS：

<li style="list-style-type: none;">

或选择具有您喜欢的任何类名称的Ul。在这里，我将“菜单”用作ul类。

.menu li{
  list-style-type: none;
}

Answer 3

添加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

Answer 4

* {
    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>

如何制作导航菜单

4 个答案: