I'm creating a navigation for a website using left floating unordered lists and am looking for a way to position an image underneath the currently active page link. I assume this can somehow be done with the CSS background-image property.
Thanks for any help!
Probably the best way to do this is to set a class
equal to active
on the active link. This could be hard-coded in, or dynamically added using server-side code.
The HTML:
<ul id="nav">
<li>Link</li>
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
</ul>
The CSS:
#nav .active {
background-image:url('YourImage.png');
background-position:50% 50%; /*Adjust as needed. Also accepts pixel values.*/
}
Background-position
added on Godwin's suggestion. See this link for details on its use.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.