list item highlighted but not the entire row
Multi tool use
list item highlighted but not the entire row
My current fiddle is working fine apart from one thing. When I hover over the button I see the list displayed. Then when I hover over a list item the background changes colour which is all fine. However when the list item changes colour there is almost a box to the left of the item which is not highlighted and can't seem to get rid of it?
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #4C66E9;}
5 Answers
5
By default most of HTML tags has some default styling, same is here in ul tag and that's the reason that when you hover li tags the left-side is not highlighted.
HTML tags
ul tag
li tags
left-side
highlighted
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
$(document).ready(function() {
var $region = $('#regionList');
$region.append('<li id="Europe">Europe</li>');
$region.append('<li id="Japan">Japan</li>');
$region.append('<li id="North America">North America</a></li>');
$("#regionList li").click(function() {
alert('Clicked list. ' + this.id);
});
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container
- needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
ul {
padding: 0px;
margin: 0px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #4C66E9;
}
.selected {
background: #FF00FF;
}
/*Add this*/
ul{
padding-left:0px;
}https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Regions
</div>If i understand you. i believe you are looking to remove ui margin. you can do that using
ul{
padding: 0;
margin: 0;
}
I believe below approach solves your problem. It was caused by ul element having default padding. I also added box-sizing: border-box to list elements, so padding won't make li elements stick out of ul.
ul
box-sizing: border-box
li
ul
I added explanation below snippet.
.dropdown-content #regionList {
padding: 0;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
box-sizing: border-box;
text-decoration: none;
display: block;
}
$(document).ready(function() {
var $region = $('#regionList');
$region.append('<li id="Europe">Europe</li>');
$region.append('<li id="Japan">Japan</li>');
$region.append('<li id="North America">North America</a></li>');
$("#regionList li").click(function() {
alert('Clicked list. ' + this.id);
});
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container
- needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content #regionList {
padding: 0;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
box-sizing: border-box;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #4C66E9;
}
.selected {
background: #FF00FF;
}https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
Regions
</div>Problem is caused by browser's default CSS rules, which are for Chrome:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
You can see more here.
The other answers are correct. I just wanted to explain what's going on.
Your user agent stylesheet contains -webkit-padding-start: 40px; for ul elements.
-webkit-padding-start: 40px;
ul
Represented here in green.
As other answers said, override the padding style for ul elements set by your user agent stylesheet.
padding
ul
Just add padding 0 to your regionList
padding 0
#regionList{
padding : 0;
}
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
So you need to add ul tag and set padding-left to 0px. You can add padding-left in li tag to have some spacing before texts.
– frnt
Jul 2 at 14:13