CSS: How to make background color around text not flush to the text?


Tags: css,menu,background,hover

Problem :

I am new to CSS and website design. See the menu on the left on this page: When you hover over a menu element the background around the text becomes white but I would like the entire row and a little bit over and under the text to become white too, similar to the top menus. Here's the code I have:

.child-sidebar-menu
{
    background-color: #DEDEDE;
}

.advanced-sidebar-menu ul li a{

text-decoration: none;
color: black;
border-bottom: 0px;
}

.advanced-sidebar-menu ul li a:hover{
text-decoration: none;
border-bottom: 0px;
}

.advanced-sidebar-menu li > ul li a:hover
 {
   color: black;
background-color: white;
 }

.advanced-sidebar-menu ul ul li a{
font-weight: normal;
font-size: 100%;
border-bottom: 0px;
}

.advanced-sidebar-menu ul{
margin: 0 0 0 0px;
list-style: none;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 0px;
line-height: 200%;
}

.advanced-sidebar-menu ul li{
    list-style:none;
    list-style-type: none;
border-bottom: 0px;


}

.advanced-sidebar-menu li.current_page_item{

    list-style-type: none;
border-bottom: 0px;
}

.advanced-sidebar-menu li.current_page_item a{
    font-weight: bold;
border-bottom: 0px;
}

Any easy way to do this? Does it have to do with border and margin?

Thank you.



Solution :

Check this JSFiddle : http://jsfiddle.net/D5sdT/

The key points are :

  1. Make <a> tag display : block. This will allow <a> to occupy complete horizontal space as li
  2. Remove padding and margin from <li>. Instead give the same to <a>.

    CSS Howto..

    How to not lose the css while appending html to an element?

    How can my website store strings locally? [closed]

    CSS: How can I make the pop over menu clickable?

    How to clear the bottom of an image like clear left / right

    How to add rows to a responsive grid

    How to avoid display block for a particular div element using css

    How to make CSS color transition time correctly with transform perspective?

    How to restrict CSS animation to a certain div?

    How to make the progress bar with html css javascript

    How to display inline with rails?

    How to control the area of background so it only makes a limited area has color other area don't?

    Global CSS - how to implement multiple frameworks

    How to change the background image of input button with jquery

    How to find out if an element is in a fixed positioned container?

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    How is better to do with CSS sprites [closed]

    How to use CSS with javascript

    How can I edit CSS on an HTML tab?

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How to select a certain element in CSS by numerical position

    How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

    Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...
    Read more

    CSS - how to apply styles to first elements in a static generated list

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    How to have proper spacing between items in the navbar regardless of word size?

    how to align element to bottom of page in print preview

    ML - CSS How to align correctly a 'required' asterisk before la form label with the label text?

    How to place a scroll down button in the middle of split screen window?

    How Do I Get A Border From YUI GRID Tool?

    How do I make an inline-block stretch?

    how to achieve this css display?