How to make a navigation menu

Question

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.

Already answered here: https://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets — Kalnode, Feb 17 '19 at 15:34
A simple example can be found here: https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style_none — c00ki3s, Feb 17 '19 at 15:36

Pruthvi Patel · Answer 1 · 2019-02-17T14:09:32.630

0

use CSS property, list-style-type: none; in nav > ul > li. Hope this works!

edited Feb 17 '19 at 14:09

answered Feb 17 '19 at 14:03

Pruthvi Patel

11
3

score 0 · Answer 2 · answered Feb 17 '19 at 14:08

0

Inline CSS :

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

Or select the Ul with any class name you prefer. Here i used 'menu' as a class of ul.

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

answered Feb 17 '19 at 14:08

Souvikavi

108
1
10

score 0 · Answer 3 · edited Feb 17 '19 at 15:56

0

Add CSS property:

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:

Hope it works fine. You can refer at https://www.w3schools.com/css/css_navbar.asp

edited Feb 17 '19 at 15:56

Theo

57,719
8
24
41

answered Feb 17 '19 at 15:31

thị sao ly ngô

1
2

score 0 · Accepted Answer · answered Feb 17 '19 at 16:51

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

How to make a navigation menu

4 Answers4