navigationbar - Drop-down menu in CSS -
i trying build drop-down multi-level navigation menu bar in pure css. here code (i know turns out ugly):
<!doctype html> <html> <head> <title>menu</title> <style> * { margin: 0; padding: 0 } ul { list-style: none } li { float: left; width: 120px; height: 20px; background: pink } li > ul { display: none } li:hover > ul { display: block; position: relative; top: -20px; left: 120px; background: red } #nav > li:hover > ul { top: 0px; left: 0px } li:hover { background: red } </style> </head> <body> <ul id="nav"> <li>1 <ul> <li>1.1 <ul> <li>1.1.1 <ul> <li>1.1.1.1</li> <li>1.1.1.2</li> <li>1.1.1.3</li> <li>1.1.1.4</li> </ul> </li> <li>1.1.2</li> <li>1.1.3</li> </ul> </li> <li>1.2</li> <li>1.3</li> <li>1.4</li> <li>1.5</li> </ul> </li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html> the code runs fine under firefox20 in ie10 off 1px up, , in chrome26 off 1px down. think because browsers render list layout differently. appreciated!
i recommend starting reset stylesheet clear of browser set styles. each browser start playing field. browsers not render lists differently.
for more info on reset stylesheets see http://meyerweb.com/eric/tools/css/reset/
Comments
Post a Comment