Visually cluttered list (UL) in vertical list

Asked

Viewed 59 times

-3

How to make the children of UL are, visually , in a vertical list, at the same level - be have to use negative margin-.?

  #hamburguer {
  display: none;
}

#categ_menu {
  display: none;
}

.menu_nav {
  background-color: yellow;
}



#hamburguer:checked~.menu_nav {
  display: block;
}

.um_lider a {
  text-decoration: none;
  color: black;
}

.um_lider li {
  list-style: none;
  padding: 20px;
}

.um_lider ul {
  display: none;
  color: firebrick;
}

#categ_menu:checked~.ul_categ {
  display: block;
}

.um_lider li ul li a {}

.ul_categ {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.ul_categ>li {
  float: none;
  padding: 20px;
  background: red;
}

.itens::after {
  clear: both;
  content: "";
  display: block;
<nav class="menu_nav">
  <ul class="um_lider">

    <li>
      <input type="checkbox" id="categ_menu">
      <label for="categ_menu"> <a>categoria</a> </label>
      <ul class="ul_categ">
        <li><a href="#">Infantil</a></li>
        <li><a href="#">Drama</a></li>
        <li><a href="#">Amor</a></li>
        <li><a href="#">Ação</a></li>
        <li><a href="#">Crime</a></li>
        <li><a href="#">Terror</a></li>
        <li><a href="#">Suspense</a></li>
        <li><a href="#">Aventura</a></li>
        <li><a href="#">Policial</a></li>
        <li><a href="#">Jogos</a></li>

      </ul>
    </li>

    <li><a href="#">Fale Conosco</a></li>
    <li><a href="#">CDs</a></li>
    <li><a href="#">Histórico</a></li>
    <li><a href="#">Sua conta</a></li>

  </ul>
</nav>

html

  • Nothing, by default any list is displayed vertically, if it is horizontal it is because it did something. Your code has a <ul> within a <li>, this seems semantically strange, of a studied in semantic web

  • Thinking about using negative margin is a sign or gambit or that you are venturing into HTML/CSS. It’s like @Costamilam said: a list is already vertical by default, and I think there’s no semantic problem in putting a ul within a li. The problem is your question is too vague.

2 answers

1

Just reset your padding ul thus:

.um_lider {
  padding: 0;
}


  #hamburguer {
  display: none;
}

#categ_menu {
  display: none;
}

.menu_nav {
  background-color: yellow;
}



#hamburguer:checked~.menu_nav {
  display: block;
}

.um_lider {
  padding: 0;
}

.um_lider a {
  text-decoration: none;
  color: black;
}

.um_lider li {
  list-style: none;
  padding: 20px;
}

.um_lider ul {
  display: none;
  color: firebrick;
}

#categ_menu:checked~.ul_categ {
  display: block;
}

.um_lider li ul li a {}

.ul_categ {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.ul_categ>li {
  float: none;
  padding: 20px;
  background: red;
}

.itens::after {
  clear: both;
  content: "";
  display: block;
<nav class="menu_nav">
  <ul class="um_lider">

    <li>
      <input type="checkbox" id="categ_menu">
      <label for="categ_menu"> <a>categoria</a> </label>
      <ul class="ul_categ">
        <li><a href="#">Infantil</a></li>
        <li><a href="#">Drama</a></li>
        <li><a href="#">Amor</a></li>
        <li><a href="#">Ação</a></li>
        <li><a href="#">Crime</a></li>
        <li><a href="#">Terror</a></li>
        <li><a href="#">Suspense</a></li>
        <li><a href="#">Aventura</a></li>
        <li><a href="#">Policial</a></li>
        <li><a href="#">Jogos</a></li>

      </ul>
    </li>

    <li><a href="#">Fale Conosco</a></li>
    <li><a href="#">CDs</a></li>
    <li><a href="#">Histórico</a></li>
    <li><a href="#">Sua conta</a></li>

  </ul>
</nav>

0

I think I understand your question there maybe in case you change this part here

.ul_categ> li {
    float: none;
    padding: 20px;
    background: red;
}

You change the padding to

padding: 20px 0;

Browser other questions tagged html

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