menu sending the first li to last li

Navigation
1

I have menu with submenu , and this submenu takes 100% of the pai 900px , li pai is in the center, I wanted to send them to the right float: right in #wrapper #top .menu ul li only that it inverted the orders of my li , the first link happened to be the last, how could I fix this? 

.menu {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 35px;
  background-color: purple;
}

.menu ul {
  width: 100%;
}

.menu ul li {
  display: inline-block;
  float: right;
  margin: 0 5px 0 0;
}

.menu ul li:first-child {
  margin: 0 11px 0 0;
}

.menu ul li a {
  display: inline-block;
  padding: 0 10px;
  height: 35px;
  line-height: 39px;
  font-size: 22px;
  transition: .9s;
  color: #fff;
  background-color: #fc2827;
  border-radius: 4px;
}

.menu ul li:hover a {
  color: #fff;
  background-color: #000;
}

.menu ul ul {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 10;
  padding: 15px 15px;
  width: 100%;
  display: none;
  box-sizing: border-box;
  background-color: #000;
}

.menu ul ul li {
  float: none;
}

.menu ul ul li a {
  text-align: left;
}

.menu ul li:hover ul {
  display: block;
}
<div class="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Pesquisar</a>
      <ul>
        <li>
          <div class="sub_menu">pesquisar</div>
        </li>
      </ul>
    </li>
    <li><a href="">Reportar erro</a></li>
    <li><a href="">Contato</a></li>
    <li><a href="">Facebook</a></li>
    <li><a href="">Twitter</a></li>
    <li><a href="#">Gêneros</a>
      <ul>
        <li>
          <div class="sub_menu">generos</div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Notice that the formatting for my li is with float: right;

    
asked by anonymous 05.07.2018 / 15:39

1 answer

1

Just put text-align:right on <ul> and not float on <li>

Here's how: 

.menu {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 35px;
  background-color: purple;
}

.menu ul {
  width: 100%;
    text-align: right;
}

.menu ul li {
  display: inline-block;
  
  margin: 0 5px 0 0;
}

.menu ul li:first-child {
  margin: 0 11px 0 0;
}

.menu ul li a {
  display: inline-block;
  padding: 0 10px;
  height: 35px;
  line-height: 39px;
  font-size: 22px;
  transition: .9s;
  color: #fff;
  background-color: #fc2827;
  border-radius: 4px;
}

.menu ul li:hover a {
  color: #fff;
  background-color: #000;
}

.menu ul ul {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 10;
  padding: 15px 15px;
  width: 100%;
  display: none;
  box-sizing: border-box;
  background-color: #000;
}

.menu ul ul li {
  float: none;
}

.menu ul ul li a {
  text-align: left;
}

.menu ul li:hover ul {
  display: block;
}
<div class="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Pesquisar</a>
      <ul>
        <li>
          <div class="sub_menu">pesquisar</div>
        </li>
      </ul>
    </li>
    <li><a href="">Reportar erro</a></li>
    <li><a href="">Contato</a></li>
    <li><a href="">Facebook</a></li>
    <li><a href="">Twitter</a></li>
    <li><a href="#">Gêneros</a>
      <ul>
        <li>
          <div class="sub_menu">generos</div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Another way to fix this is to not use float , but use display:flex and align items at the end with justify-content:flex-end (right) of the parent element 

.menu {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 35px;
  background-color: purple;
}

.menu ul {
  width: 100%;
  display: flex;
    justify-content: flex-end;
}

.menu ul li {
  display: inline-block;
  margin: 0 5px 0 0;
}

.menu ul li:first-child {
  margin: 0 11px 0 0;
}

.menu ul li a {
  display: inline-block;
  padding: 0 10px;
  height: 35px;
  line-height: 39px;
  font-size: 22px;
  transition: .9s;
  color: #fff;
  background-color: #fc2827;
  border-radius: 4px;
}

.menu ul li:hover a {
  color: #fff;
  background-color: #000;
}

.menu ul ul {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 10;
  padding: 15px 15px;
  width: 100%;
  display: none;
  box-sizing: border-box;
  background-color: #000;
}

.menu ul ul li {
  float: none;
}

.menu ul ul li a {
  text-align: left;
}

.menu ul li:hover ul {
  display: block;
}
<div class="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Pesquisar</a>
      <ul>
        <li>
          <div class="sub_menu">pesquisar</div>
        </li>
      </ul>
    </li>
    <li><a href="">Reportar erro</a></li>
    <li><a href="">Contato</a></li>
    <li><a href="">Facebook</a></li>
    <li><a href="">Twitter</a></li>
    <li><a href="#">Gêneros</a>
      <ul>
        <li>
          <div class="sub_menu">generos</div>
        </li>
      </ul>
    </li>
  </ul>
</div>
    
05.07.2018 / 16:55
How to Overlap one Image with another? ValueError in KFold of Scikit-learn: my dataset has two classes! What is going on?