0

enter image description here

On hover i want to fill baackground color which takes a shape of spearhead "WITHOUT SPECIFYING WIDTH". I have the folliowing code:,

html:

 <div class="menu">
<ul>
     <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Business Verticals</a></li>
    <li><a href="#">Solutions</a></li>
   <li><a href="#">Solution Partners</a></li>
     <li><a href="#">Contact Us</a></li>
    </ul>


      </div>

css:

.menu ul li{list-style:none;float:left;padding: 15px 66px;border-right:1px     solid #032f3e;}
 .menu ul li:last-child{margin-right:0;border-right:none;}
 .menu ul li a{text-decoration:none;color:#fff; font-family: 'OpenSans-Bold';font-size:15px;}
 .menu ul li a:hover{color:#ab987a;}
Nag
  • 806
  • 1
  • 13
  • 28
  • But that they have specified width,but the content inside it may vary,how to do it without using width? – Nag May 05 '16 at 11:34
  • 1
    the second link does not specify a width. If it does, then it is only an optional property – jbutler483 May 05 '16 at 11:52
  • Yes, both the answers in the second link can be adapted to work without specifying width. – Harry May 05 '16 at 11:54

0 Answers0