html - how to create a box that hovers above existing text? -
i creating dvd catalog website database of dvd images , informations such titles/genre/year etc.
i need create text "sort by". when hover word "sort by", box appear below "sort by" , have several text hyperlinks such "title", "genre", "year" appearing. box should overlap existing images/texts on website.
is there simple way implement this?
here's how css only:
the html:
<div class="container"> <p>sort by</p> <ul> <li>title</li> <li>date</li> <li>artist</li> </ul> </div>
the css:
.container ul { display: none; } .container:hover ul{ display: inline; /* or block or whatever need */ }
here's example: http://jsfiddle.net/9qbgn/8/ (just hover on "sort by")
Comments
Post a Comment