How do I remove the bullets and keep the rest of my html/css code from falling apart

Question

The issue is with bullets in my html file.

I have already tried going to nav ul, the location I need to remove the bullet list and tried including list styles to remove them. Although this works, the formatting of my menu falls apart and I don't know either the cause or the fix for this. So instead I decided to leave the bullets in in the hopes that someone could find a solution for my issue. I've included the css and html code I'm working with. This is my first post so if there's anything I could do better when posting a question, please let me know.

* {
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    width: 100%;
    position: relative;
}

body{
    height: 100%;
    background:#b794e6ff;
}

h2{
    padding: 40px;
    background: #646ecb;
    color:#f0f1f5;
    font-family: fantasy;
    text-align: center;
    font-size: 30pt;
    letter-spacing: 15px;
}

.navbar {
    background: #fc575e;
    height: 40px;
    width:700px;
    display: block;
    margin:0 auto;
    text-align: center;
    text-transform: uppercase;
}

nav a {
    display: block;
    text-decoration:none;
    font-family: monospace;
    font-weight: bold;
    font-size: 13pt;
    color: aliceblue;
}

nav a:hover {
    background:#223423;
    color: #f0f1f5;
}


nav ul {
  display: block;
    
}

nav ul li {
    float:left;
    width:140px;
    height: 40px;
    line-height: 40px;
    background:teal;
}

nav ul ul li{
    position: relative;
    display:none;
}

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

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
     
      <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
       
   
      
      <title>Round-a-Whirl</title>
  </head>
  <body>
    <div class="wrapper">
        <header>
            <div></div>
           <h2>HEADER LOGO</h2>
        </header>
        <div class="navbar">
            <nav>
                <ul>
                    <li><a href="#"><i class="fa fa-plane"> Flights</i></a></li>
                    <li><a href="#"><i class="fa fa-hotel"> Hotel</i></a></li>  
                    <li><a href="#"><i class="fa fa-car"> Car Rental</i></a></li>
                <li><a href="#"><i class="fa fa-globe"> Discover</i></a>
                    <ul>
                    <li>Vacation</li>
                    <li>Cruise</li>
                    <li>City</li>
                    <li>Nature</li>
                    <li>Getaways</li>
                    </ul>
                    </li>
                <li><a href="#"><i class="fa fa-tag"> Deals</i></a></li>
                
                </ul>

            </nav>
      </div>
        <article>
        This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
        </article>
        <footer>
            Round-a-Whirl &copy; 2019
        </footer>
      

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

set the list-style to be 'none' in the CSS file didn't work? — Toxnyc, Mar 03 '19 at 22:44
Possible duplicate of [Removing "bullets" from unordered list
](https://stackoverflow.com/questions/18028741/removing-bullets-from-unordered-list-ul) — Rob, Mar 03 '19 at 22:48
The problem i'm having is an overlap from the drop down menu in the discover section . the top edge of the first drop down list goes through discover once I remove the bullets. For whatever reason, it works fine on the online editor but even after copying the answer to my own desktop editor the problem is still there. — Keith Segovia, Mar 03 '19 at 23:29

score 0 · Answer 1 · answered Mar 03 '19 at 22:45

Please have a look at list-style-type. It sets the "bullets" for a list. The standard given by user agent stylesheet is list-style-type: disc;. Change the property to list-style-type: none; to get rid of the bullets.

* {
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    width: 100%;
    position: relative;
}

body{
    height: 100%;
    background:#b794e6ff;
}

h2{
    padding: 40px;
    background: #646ecb;
    color:#f0f1f5;
    font-family: fantasy;
    text-align: center;
    font-size: 30pt;
    letter-spacing: 15px;
}

.navbar {
    background: #fc575e;
    height: 40px;
    width:700px;
    display: block;
    margin:0 auto;
    text-align: center;
    text-transform: uppercase;
}

nav a {
    display: block;
    text-decoration:none;
    font-family: monospace;
    font-weight: bold;
    font-size: 13pt;
    color: aliceblue;
}

nav a:hover {
    background:#223423;
    color: #f0f1f5;
}


nav ul {
  display: block;
  list-style-type: none;  
}

nav ul li {
    float:left;
    width:140px;
    height: 40px;
    line-height: 40px;
    background:teal;
}

nav ul ul li{
    position: relative;
    display:none;
}

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

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
     
      <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
       
   
      
      <title>Round-a-Whirl</title>
  </head>
  <body>
    <div class="wrapper">
        <header>
            <div></div>
           <h2>HEADER LOGO</h2>
        </header>
        <div class="navbar">
            <nav>
                <ul>
                    <li><a href="#"><i class="fa fa-plane"> Flights</i></a></li>
                    <li><a href="#"><i class="fa fa-hotel"> Hotel</i></a></li>  
                    <li><a href="#"><i class="fa fa-car"> Car Rental</i></a></li>
                <li><a href="#"><i class="fa fa-globe"> Discover</i></a>
                    <ul>
                    <li>Vacation</li>
                    <li>Cruise</li>
                    <li>City</li>
                    <li>Nature</li>
                    <li>Getaways</li>
                    </ul>
                    </li>
                <li><a href="#"><i class="fa fa-tag"> Deals</i></a></li>
                
                </ul>

            </nav>
      </div>
        <article>
        This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
        </article>
        <footer>
            Round-a-Whirl &copy; 2019
        </footer>
      

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

score 0 · Accepted Answer · answered Mar 03 '19 at 22:46

You want to add the style list-style-type:none; to the <ul/> in the <nav/>

This can be done as simply as adding this to your css:

.navbar ul {
    list-style-type: none;
}

Here is your updated page:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  width: 100%;
  position: relative;
}

body {
  height: 100%;
  background: #b794e6ff;
}

h2 {
  padding: 40px;
  background: #646ecb;
  color: #f0f1f5;
  font-family: fantasy;
  text-align: center;
  font-size: 30pt;
  letter-spacing: 15px;
}

.navbar {
  background: #fc575e;
  height: 40px;
  width: 700px;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}

.navbar ul {
  list-style-type: none;
}

nav a {
  display: block;
  text-decoration: none;
  font-family: monospace;
  font-weight: bold;
  font-size: 13pt;
  color: aliceblue;
}

nav a:hover {
  background: #223423;
  color: #f0f1f5;
}

nav ul {
  display: block;
}

nav ul li {
  float: left;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: teal;
}

nav ul ul li {
  position: relative;
  display: none;
}

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

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" type="text/css" href="css/maintravel2.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">



  <title>Round-a-Whirl</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div></div>
      <h2>HEADER LOGO</h2>
    </header>
    <div class="navbar">
      <nav>
        <ul>
          <li><a href="#"><i class="fa fa-plane"> Flights</i></a></li>
          <li><a href="#"><i class="fa fa-hotel"> Hotel</i></a></li>
          <li><a href="#"><i class="fa fa-car"> Car Rental</i></a></li>
          <li><a href="#"><i class="fa fa-globe"> Discover</i></a>
            <ul>
              <li>Vacation</li>
              <li>Cruise</li>
              <li>City</li>
              <li>Nature</li>
              <li>Getaways</li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-tag"> Deals</i></a></li>

        </ul>

      </nav>
    </div>
    <article>
      This is a simple site I created using HTML and CSS of a travel site for the fictional Round-a-Whirl travel company.
    </article>
    <footer>
      Round-a-Whirl &copy; 2019
    </footer>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

How do I remove the bullets and keep the rest of my html/css code from falling apart

2 Answers2