Hello ,
first of all , thank you for reading this and I already apologize for my english mistakes
In my leisure time I'm trying to learn html / css / javascript by my own , but since I started my own little webpage ,
where I test some stuff , I have problems with my dropdown menu ... I really don't know where my mistakes are , so I came here to ask for help !
Here's my code I tried (I optimized the code so that there's just the navbar left)
<html><head><style>#nav ul{ display: table; margin: 100px auto; width:700px; padding: 0px; font-size:25px; font-weight:bold; background: Gray; background: -webkit-linear-gradient(Gray, DarkGray); background: -moz-linear-gradient(Gray, DarkGray); background: -ms-linear-gradient(Gray, DarkGray); background: -o-linear-gradient(Gray, DarkGray); background: linear-gradient(Gray, DarkGray); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); } ul li{ display:table-cell; } ul li a{ display: block; text-align: center; color: rgba(0, 0, 0, .7); padding: 8px 8px 17px 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 1px 0 rgb #A9A9A9 inset, 0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset, 0 -3px 0 hsl(210, 100%, 44%) inset, 0 -4px 0 hsl(210, 100%, 50%) inset, 0 -5px 0 hsl(210, 100%, 60%) inset; } .divider-vertical{ border-right: 1px solid grey; } ul ul { display: none; position: absolute; padding: 0px; } ul ul li{ background:#262626; display:block; text-align:center; } a.font{ color: white; font-size:25; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } li a:hover > ul ul{ display:block; }</style></head><body><div id="nav"> <ul> <li><a href="#">a</a> <ul> <li><a class="font" href="#">a1</a></li> <li><a class="font" href="#">a2</a></li> </ul> </li> </ul> </div> </body></html>
Like I said before , thank you for reading this and I hope someone can help me :')