CODEWITHSUNDEEP
css
user1030181
user1030181

Reputation: 2015

How to remove arrows on list item. I only need arrow on 2017

How to remove arrows on listitem. I only need arrow on 2017. For list items i need solid square. I have used nested unordered list but for only top UL i need arrow not for the second UL

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
ul#ulMeet li:before {
  content: "\e080";
  /*content: "\009B";*/
  font-family: 'Glyphicons Halflings';
  font-size: 10px;
  /*font-weight:bold;*/
  float: left;
  margin-top: 2px;
  margin-left: -14px;
  color: #999999;
}
<ul id="ulMeet" style="list-style:none">
  <li>
    <h4><a id="lnk" href="#" style="text-align:left;" onclick="YearsToggle(event, 'div2017')">2017</a></h4>
    <div id="2017" style="display:none;">
      <center><strong>2017</strong></center><br />
      <ul>
        <li>Test1</li>
        <li>Test2</li>
      </ul>
    </div>
</ul>

enter image description here

Upvotes: 0

Views: 1422

Answers (2)

dukedevil294
dukedevil294

Reputation: 1305

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
ul#ulMeet > li:before {
  content: "\e080";
  /*content: "\009B";*/
  font-family: 'Glyphicons Halflings';
  font-size: 10px;
  /*font-weight:bold;*/
  float: left;
  margin-top: 2px;
  margin-left: -14px;
  color: #999999;
}

ul li ul, ul li ul li{
  list-style-type: square;
}

This will apply the arrow only if the li is an immediate child of #ulMeet and then for every ul nested inside of another ul, it will have square bullets.

Upvotes: 0

Friday Ameh
Friday Ameh

Reputation: 1684

Replace ul#ulMeet li:before with ul#ulMeet > li:before doing so, target the direct lichildren of ul#ulMeet 

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
ul#ulMeet> li:before {
  content: "\e080";
  /*content: "\009B";*/
  font-family: 'Glyphicons Halflings';
  font-size: 10px;
  /*font-weight:bold;*/
  float: left;
  margin-top: 2px;
  margin-left: -14px;
  color: #999999;
}
<ul id="ulMeet" style="list-style:none">
  <li>
    <h4><a id="lnk" href="#" style="text-align:left;" onclick="YearsToggle(event, 'div2017')">2017</a></h4>
    <div id="2017">
      <center><strong>2017</strong></center><br />
      <ul>
        <li>Test1</li>
        <li>Test2</li>
      </ul>
    </div>
</ul>

Upvotes: 1

Related Questions