color in button background with css
Question by anc1revv
I’m building my navigation bar and I currently am using 3 images for each option on the menu.
I’m using css to replace the images based on when its non-selected, hovered, and selected.
Using html and css, i only knew how to highlight the actual words (ie home, order, how it works…), i couldn’t figure out a way to color in the whole box when selected.
Is there a way to do this with html/css without using image files?
Answer by Starx
So little information provided but still I will try assuming the most general way.
In a basic ul and li menu structure, like the following.
<ul>
<li>
<a href="#">Link Text</a>
</li>
</ul>
The box surrounding all the menus are selected by simply
ul {
/* Styles */
}
The box surrounding a menu item (probably what you are asking) is selected by ul > li
ul > li {
/* Style */
background-color: red;
}
Note: You can also use ul li { ... } for more general way.
Where as, link itself is selected by ul > li a
ul > li a {
/* Style */
}
Try to implement this on your case.
