generalice
New Member
I have problem with my menu hover links. I have a menuHTML:\[code\] <div class="menu"> <ul id="nav"> <li><div><a href="http://stackoverflow.com/questions/15597863/#">HOME</a> <div class="hover"></div></div></li> <li><div><a href="http://stackoverflow.com/questions/15597863/#">ABOUT</a><div class="hover"></div></div></li> <li><div><a href="http://stackoverflow.com/questions/15597863/#">PORTFOLIO</a><div class="hover"></div></div></li> <li><div><a href="http://stackoverflow.com/questions/15597863/#">SERVICE</a><div class="hover"></div></div></li> <li><div><a href="http://stackoverflow.com/questions/15597863/#">BLOG</a><div class="hover"></div></div></li> <li><div><a href="http://stackoverflow.com/questions/15597863/#">CONTACT</a><div class="hover"></div></div></li> </ul> </div>\[/code\]CSS:\[code\].menu { width: 950px; height: 50px; float: right; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; margin-top: 80px; border: 1px #FFF solid;}.menu #nav { list-style: none; }.menu #nav li { display: inline-block; padding: 0px 30px 0px 30px;}.menu #nav li a { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; color: #FFF; text-decoration: none;}.menu #nav li a:hover { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; color: #FFF; text-decoration: none; color: #ca6666;}.menu #nav li a .hover { display:none;}.menu li a:hover + .hover { background-image:url(images/hover.png); background-position:center; width: 96px; height: 33px; color: #ca6666; font-weight: bold; display: block; margin-top: -20px;}.clear { clear: both;}\[/code\]and I want to make my links independent from others. For example now, when I hover over links my menu expands and it's not looking great. I want to make my hover links independent from others when I hover my menu not expands. How can I do that?