Romaopporania
New Member
*I exhaustedly searched this site for an answer before posting a question, I attempted multiple solutions and nothing worked to my exact codes. While you may find duplicate questions on this site. I don't consider it to be a duplicate unless the coding is EXACTLY the same as well as the solutions. Nothing on this site worked for my exact coding therefore I needed to post my exact code for help. *I have a menu that looks like the one below. and the drop down on it. Right now the nested ul just simply spreads throughout the page. it needs to show up in a nice drop down section under administration. I have tried searching for this and asking my colleagues none of them have done it before. I have created a jsFiddle here: http://jsfiddle.net/z3Lpm/\[code\]<div id="menu"> <ul> <li><a href="http://stackoverflow.com/questions/15889075/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/15889075/#">Administration</a> <ul> <li><a href="http://stackoverflow.com/questions/15889075/#">Products</a></li> </ul> </li> </ul></div>\[/code\](not my full menu but you get the point.) and then my css: \[code\]#menu{ width: 100%; border: 1px solid #000; height: 50px; background-color:#181818; font-family: Helvetica, sans-serif; font-size: 13px;}#menu ul{ margin-top: 20px;}#menu ul li{ list-style-type: none; display: inline; margin-left: 50px;}#menu ul li a:link{ color: #FFF; text-decoration: none; text-transform: uppercase; padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px;}#menu ul li a:visited{ color: #FFF; text-decoration: none; text-transform: uppercase;}#menu ul li a:hover{ color: #FFF; background-color: #81B101; -webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); -moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);}\[/code\]