menu sending the first read to last read

Asked

Viewed 114 times

1

have a menu with submenu, and that submenu takes 100% of the div pai that is 900px, as li pai stay in the center, I wanted to send them to the right I gave a float: right in #wrapper #top .menu ul li only that he reversed my orders li, the first link became the last, how could I fix this ?

inserir a descrição da imagem aqui

.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>

note that the formatting corresponding to mine li are with float: right;

css

  • Car is a little confused to understand what is happening... The links seem to be in the right order by the code you posted in the question at least... Tb seems to be missing part of the css in the question because the page does not behave as you are describing... You could edit the question and include a print with the problem on the screen?

  • @hugocsl edited the question, I give a float:right in li and the first link becomes the last so on, understood ?

  • Now it became clearer, to fix this there are several options, the simplest is to remove the float from the LI and put a simple text-align:right in UL, my answer has more details

1 answer

1


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

See how it looks:

.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 the float, but use display:flex and align the items at the end with justify-content:flex-end (right) of 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>

  • right, you’re zka bro

  • 1

    @Bruno is nois who flies witch! Tmj [] s

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.