CODEWITHSUNDEEP
htmlcss
Sufi
Sufi

Reputation: 238

How to make hover full fit the border in leftside?

I've tried to make hover full, it fit the border in left side but I haven't found how to make this full. I used right-border and as the pictures you can see the hover not full in left side. could you guys help me? Thank in advance.

No hover

With Hover

     #menutext {
		float: left;
		border-bottom:1px solid #d2d6d5;
		width: 100%;
       background:gray;
		
	}
	
		 #menutext ul {
			display: inline; 
			margin-left: 10%;

		
		}
		
		 #menutext ul  li{
			display: inline; 
			position: relative;
			border-left: none;
		
		}
		
		 #menutext li a {
			text-decoration: none;
			color: #444;
			font-size: 14px;
			font-family: MuseoSans,serif;
			text-transform: uppercase;
			padding:10px;
			border-right: 1px solid #d2d6d5;
			text-align: center;	
		
		}
		
		 #menutext ul li :hover{
         
		  color:#919191;
		background-color: #f4f4f4;	
		  
         }
	
    <div id="menu">
    <div id="menutext">
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">product</a></li>
    </ul>
    </div>

Upvotes: 1

Views: 74

Answers (1)

austinthedeveloper
austinthedeveloper

Reputation: 2601

Here is a cleaned up version of your code:

http://jsfiddle.net/austinthedeveloper/vLubg8pg/

The big changes were getting rid of display: inline on the ul and li along with setting the link as a block element:

#menutext {
     float: left;
     border-bottom:1px solid #d2d6d5;
     width: 100%;
     background:gray;
 }
 #menutext ul {
     margin: 0 0 0 10%;
 }
 #menutext ul li {
     float: left;
     position: relative;
     border-left: none;
     list-style: none;
 }
 #menutext li a {
     text-decoration: none;
     color: #444;
     display: inline-block;
     font-size: 14px;
     font-family: MuseoSans, serif;
     text-transform: uppercase;
     padding:10px;
     border-right: 1px solid #d2d6d5;
     text-align: center;
 }
 #menutext ul li :hover {
     color:#919191;
     background-color: #f4f4f4;
 }

Upvotes: 2

Related Questions