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

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -