Remove blank spaces [duplicated]

Question

Remove blank spaces [duplicated]

Navigation

#1 by (6 votes)

2

I need the menu to occupy the entire width so that those edges are not visible in white and also at the top. What simple solution exists?

.menu {
  display: flex;
  background: #333;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

li {
  position: relative;
}

li > ul {
  display: none;
  position: absolute;
  background: #333;
}

li ul ul {
  left: 100%;
  top: 0;
}

li:hover > ul {
  display:block;
}

.menu__item {
  flex: auto;
}

a {
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: .5em;
  white-space: nowrap;
}

<ul class="menu">
  <li class=menu__item>
    <a class=menu__link href="#">Item 1</a>
    <ul>
      <li><a href="#">Subitem 1</a></li>
      <li><a href="#">Subitem 2</a></li>
      <li><a href="#">Subitem 3</a>
        <ul>
          <li><a href="#">Subitem 1</a></li>
          <li><a href="#">Subitem 2</a></li>
          <li><a href="#">Subitem 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 2</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 3</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 4</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 5</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 6</a>
  </li>
</ul>

html5 html css3 css

asked by José Ignacio 21.03.2018 в 20:03

source

1 answer

Styles Bootstrap hashCode () returns the value of the integer, not its hashCode

score 6 · Accepted Answer

At least with the code you provide, the problem is that the <body> has its margins by default, you put them in 0 and that's it.

html,
body {
  margin: 0;
}

.menu {
  display: flex;
  background: #333;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

li {
  position: relative;
}

li > ul {
  display: none;
  position: absolute;
  background: #333;
}

li ul ul {
  left: 100%;
  top: 0;
}

li:hover > ul {
  display:block;
}

.menu__item {
  flex: auto;
}

a {
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: .5em;
  white-space: nowrap;
}

<ul class="menu">
  <li class=menu__item>
    <a class=menu__link href="#">Item 1</a>
    <ul>
      <li><a href="#">Subitem 1</a></li>
      <li><a href="#">Subitem 2</a></li>
      <li><a href="#">Subitem 3</a>
        <ul>
          <li><a href="#">Subitem 1</a></li>
          <li><a href="#">Subitem 2</a></li>
          <li><a href="#">Subitem 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 2</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 3</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 4</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 5</a>
  </li>
  <li class=menu__item>
    <a class=menu__link href="#">Item 6</a>
  </li>
</ul>