List-style disappearing when using 'columns'

Question

List-style disappearing when using 'columns'

Navigation

#1 by (5 votes)

3

I'm using 'columns' in ul to split my menu into 2 columns. More in use, list-style some. For what reason? Is there a possibility of not disappearing?

<ul id="menu-footer">
  <li><a href="index.php">home</a></li>
  <li><a href="empresa.php">empresa</a></li>
  <li><a href="servicos.php">servicos</a></li>
  <li><a href="produtos.php">produtos</a></li>
  <li><a href="contatos.php">contatos</a></li>
</ul>

footer #menu-footer { -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; -ms-column-count: 2; column-count: 2; list-style-position: inside;}
footer #menu-footer li {list-style: square; color: #fff;}

html5 css3

asked by anonymous 05.06.2014 / 22:01

1 answer

How to recover source code HTML bi Firefox via Addon / Complement? How do I get the value of a ListBox from the selected index of another ListBox?

score 5 · Answer 1

You need to add list-style-position to specify that markers should appear within the content stream:

.menu{
   -webkit-column-count: 2;
   -moz-column-count: 2;
   column-count: 2;
   list-style-position: inside;
}

Example: JSFiddle

Edited

You have some issues with your CSS selectors, change your code from footer #menu-footer to footer > #menu-footer and footer #menu-footer li to footer > #menu-footer.li . For more understanding selectors

footer > #menu-footer { 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    -o-column-count: 2; 
    -ms-column-count: 2; 
    column-count: 2; 
    list-style-position: inside;
}
footer > #menu-footer.li {
list-style: square; color: #fff;
}

Example2: JSFiddle