Css horizontal menu

I am working on a horizontal menu using strictly css, but I have one last problem that I cannot solve. When the user is anchored, I want the entire box to be highlighted, and not just where the words end. The problem is that the shortcut line exceeds the space I want to allocate, and if I use overflow: hidden, it also hides my third submenu! I will attach html and css - I would really appreciate help here. Thank you very much!

<div id="navigation"> <ul> <li> services <ul> <li>Wills</li> <li>Powers of Attorney</li> <li><Real Estate Transactions</li> <li>Business and Corporate</li> <li>Estate Planning </li> <li>Estate Administration </li> <li>Employment Law</li> </ul> </li> <li> resources <ul> <li>Downloadable PDFs</li> <li>Links</li> </ul> </li> <li> case studies </li> <li> about us <ul> <li>The Team Concept</li> <li>Community Involvement</a></li> <li>Partner Profiles </a> <ul> <li> Gerald Bizan </li> <li> D. Bromley Davis</li> <li> Phillippe Sills</li> <li> Marc Elley </li> </ul> </li> </ul> </li> <li> contact us <ul> <li>< Contact Information</li> <li> Location Map</li> </ul> </li> </ul> </div> //And the CSS #navigation ul { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:12.5px; margin:0px; padding:0px; } #navigation li { float:left; list-style:none; height:10px; margin-top:5px; margin-bottom:15px; margin-left:1px; } #navigation li a {color:#FFF; text-decoration:none; background-color:#4c4538; padding:5px;} #navigation li a:hover {color:#FFF; text-decoration:none; background-color:#ad5d5c; } #navigation li ul /*1st submenu */ { position:absolute; display:none; background: url(redblock.png); margin-top:-90px; } #navigation li:hover ul { display:list-item; width:170px; margin-top:9px; overflow:hidden; } #navigation li:hover li { margin-top:9px; padding:0px; } #navigation li li { padding:0px; list-style:none; display:list-item; } #navigation li li a {color:#FFF; text-decoration:none; background-color:transparent; } #navigation li li a:hover { white-space:nowrap; background-color:#900; padding-right:170px; margin-bottom:200px; } 
+4
source share
2 answers

Moving the background-color property from the a:hover rule to the li:hover rule will cause the color of the entire field to change, and not just at the end of the words.

+2
source

There are several syntax errors:

 <li><Real Estate Transactions</li> **should be** <li>Real Estate Transactions</li> <li><Contact Information</li> **should be** <li>Contact Information</li> 

and the <a> tags had no initial values:

 <li>Community Involvement</a></li> **should be** <li><a href="#">Community Involvement</a></li> <li>Partner Profiles </a> **should be** <li><a href="#">Partner Profiles </a> 

This should be a good starting point - I will continue to look at it.

+1
source

Source: https://habr.com/ru/post/1334271/


All Articles