How to remove default padding?

Question

In the below code I'm tried to create a dynamic menu (here it's written as static). when you click any where on the menu it will alert.

document.getElementById("rightMenu").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

ul,li{
  list-style:none;
  }
#prof-name {
    margin-top: 10%;
    padding-right: 0 ! important;
}

<ul id="rightMenu" class="user-profile">
   <li class="topmenu rtopmenu-display-event" id="prof-name">
       <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
       <ul class="profile-menu" id="profile-menu">
    <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
     <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
                <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
              </ul>
            </li>
                      </ul>

but the problem I'm facing is that it is alerting event if you are clicked on right side of the menu.

I have tried padding-right: 0 ! important; ,but which is not working , it's not possible to set a specific width to menu because it's generating dynamically.

How can I fix this problem?

Answer 1

Your UL element is a block-level element, so if you inspect it you can see that it's 100% wide.

Either set it to display: inline-block; or give it some specific width.

#rightMenu { display: inline-block }

fiddle

Answer 2

Yes ofcourse, it will because you have applied the click event on the entire <ul> element(the container of the menu) instead of just the menus - Just target the <a>

Change your javascript code to

document.querySelector("#rightMenu a").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

document.querySelector("#rightMenu a").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

ul,li{
  list-style:none;
  }
#prof-name {
    margin-top: 10%;
    padding-right: 0 ! important;
}

<ul id="rightMenu" class="user-profile">
   <li class="topmenu rtopmenu-display-event" id="prof-name">
       <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
       <ul class="profile-menu" id="profile-menu">
    <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
     <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
                <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
              </ul>
            </li>
                      </ul>

Answer 3

use this code or simply give padding-left:0px in ul

.user-profile
{
padding-left:0px;
}

Answer 4

document.getElementById("rightMenu").addEventListener("click",function(){
            alert("oh you clicked on right Menu");
        });

  html,body{
        padding:0;
        margin:0;
    }
    ul,li{
        list-style:none;
        padding:0;
        display:inline-block;
  
    }
    #prof-name {
        margin-top: 10%;
    }

<ul id="rightMenu" class="user-profile">
    <li class="topmenu rtopmenu-display-event" id="prof-name">
        <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
        <ul class="profile-menu" id="profile-menu">
            <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
            <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
            <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
        </ul>
    </li>
</ul>