Hello, indentation places are clickable, how to fix?

enter image description here

CSS:

li.top { list-style-type: none; display: inline-block; margin-left: 6%; margin-top: 4%; color: #e6e6e6; font-size: 1.5em; font-family: 'Roboto', sans-serif; transition: 0.35s; } .bottomline { position: relative; color: #ff3296; cursor: pointer; } .bottomline:after { display: block; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: #249cce; content: ""; transition: width 0.2s; } .bottomline:hover { color: #fff; } .bottomline:hover:after { width: 100%; }

HTML:

  <ul> <div class="col-md-2 col-xs-12"> <p class="onheader">TVARINSKY</p> </div> <div class="col-md-8 col-xs-9"> <a href="#"><li class="top bottomline">Home</li></a> <a href="#"><li class="top bottomline">About me</li></a> <a href="#"><li class="top bottomline">Portfolio</li></a> <a href="#"><li class="top bottomline">Comments</li></a> <a href="#"><li class="top bottomline">Contact</li></a> </div> <div class="col-md-2 col-xs-10"> <a href="#"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a> <a href="#"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a> <a href="#"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a> </div> </ul>
  • 2
    What are li doing inside a ? - Visman
  • @Visman Too little, fixed - user234223

2 answers 2

The thing is that you have a li tag inside the a tag, and that is how it behaves.

    Corrected on:

    CSS:

     a.top { list-style-type: none; display: inline-block; margin-left: 6%; margin-top: 4%; color: #e6e6e6; font-size: 1.5em; font-family: 'Roboto', sans-serif; transition: 0.35s; text-decoration: none; } .bottomline { position: relative; color: #ff3296; cursor: pointer; } .bottomline:after { display: block; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: #249cce; content: ""; transition: width 0.2s; } .bottomline:hover { color: #fff; } .bottomline:hover:after { width: 100%; }

    HTML:

      <div class="col-md-12 col-xs-11"> <div class="col-md-2 col-xs-12"> <p class="onheader">TVARINSKY</p> </div> <div class="col-md-8 col-xs-9"> <a href="#" class="top bottomline">Home</a> <a href="#" class="top bottomline">About me</a> <a href="#" class="top bottomline">Portfolio</a> <a href="#" class="top bottomline">Comments</a> <a href="#" class="top bottomline">Contact</a> </div> <div class="col-md-2 col-xs-10"> <a href="#"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a> <a href="#"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a> <a href="#"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a> </div> </div>