how to hide li bullets in navigation menu and footer links BUT show them for listing items

Question

I have a navigation menu  footer  and a slideshow which use listed style to list links and images  I have the css list-style none  set to hide the bullets next to the links and images in the nav and footer but I want to show the bullets for list normal text   How can I do this

User · Answer

I combined some of Flavio s answer to this small solution    hidden-ul-bullets li       list-style  none     hidden-ul-bullets ul       margin-left  0 25em     for my purpose  a little indentation is wished     The decision about bullets is made at an enclosing element  typically a div  The drawback  or todo  of my solution is that the liststyle removal also applies to ordered lists

User · Answer

when bullet have to hide then use  li   list-style  none   when bullet have to list show  then use  li   list-style  initial

User · Answer

You can also define a class for the bullets you want to show  so in the CSS   ul  list-style none  list-style-type none  list-style-image none     And in the HTML you just define which lists to show    lt ul style  list-style disc   gt    Or you alternatively define a CSS class    show-list  list-style disc     Then apply it to the list you want to show    lt ul class  show-list  gt    All other lists won t show the bullets

User · Answer

Let s say you re using this HTML5 layout    lt html gt       lt body gt           lt header gt               lt nav gt  lt ul gt     lt  ul gt  lt  nav gt           lt  header gt           lt article gt               lt ul gt     lt  ul gt           lt  article gt           lt footer gt               lt ul gt     lt  ul gt           lt  footer gt       lt  body gt   lt  html gt    You could say in your CSS   header ul  footer ul  nav ul   list-style-type  none      If you re using HTML 4  assign IDs to your DIVs  instead of using the new fancy-pants elements  and change this to    header ul   footer ul   nav ul   list-style-type  none      If you re using a CSS reset stylesheet  like Eric Meyer s   you would actually have to give the list style back  since the reset removes the list style from all lists    content ul   list-style-type  disc  margin-left  1 5em

User · Answer

The example bellow explains how to remove bullets using a css style class  You can use   similar to css class  by identifier   id   by parent tag  etc  The same way you can use to define a css to remove bullets from the page footer   I ve used this site as a starting point    lt html gt   lt head gt   lt style type  text css  gt  div ui-menu li       list-style none      background-image none      background-repeat none      background-position 0     ul       list-style-type none      padding 0px      margin 0px    li       background-image url sqpurple gif       background-repeat no-repeat      background-position 0px 5px       padding-left 14px     lt  style gt   lt  head gt    lt body gt    lt div class  ui-menu  gt   lt ul gt   lt li gt Coffee lt  li gt   lt li gt Tea lt  li gt   lt li gt Coca Cola lt  li gt   lt  ul gt   lt  div gt    lt ul gt   lt li gt Coffee lt  li gt   lt li gt Tea lt  li gt   lt li gt Coca Cola lt  li gt   lt  ul gt   lt  body gt    lt  html gt

User · Answer

You need to define a class for the bullets you want to hide  For examples   no-bullets       list-style-type  none      Then apply it to the list you want hidden bullets    lt ul class  no-bullets  gt    All other lists  without a specific class  will show the bulltets as usual

User · Answer

You can style li elements differently based on their class  their id or their ancestor elements     li      styles all li elements       list-style-type  none      ParentListID li      styles the li elements that have an ancestor element                       of id  ParentListID         list-style-type  bullet     li className      styles li elements of class  className         list-style-type  bullet      Or  to use the ancestor elements    navigationContainerID li      specifically styles the li elements with an ancestor of                                id  navigationContainerID         list-style-type  none     li      then styles all other li elements that don t have that ancestor element        list-style-type  bullet

[html] how to hide <li> bullets in navigation menu and footer links BUT show them for listing items

Examples related to html

Examples related to html-lists