html - Trouble with CSS drop down menu -
i have been working on small css menu can’t working properly. ive been fiddling around existing menu’s , trying positioning , fonts etc working.
basically first had main menu, working fine way should. when try add dropdown 1 of options, messes , clueless fixing mess :s
what need in: positioning dropdown menu’s below correct menu-item (now float on left). want submenu items, exact same style/size/font/etc main menu items, reason can’t working either.
any appreciated, submitted css / html code of menu pastebin file:
its not perfect still can figure out positioning correctly not fonts. check jsfiddle
css used:
#mainmenu ul{ width:954px; padding:0; margin:5px 0 10px 0; list-style-type:none; border:solid 2px #ddd; font-size: 18px; text-transform: uppercase; } #mainmenu ul li a{ text-decoration:none; color:#000000; background-color:#eee; padding:0.2em 0.6em; border-right:0px solid white; display:block; } #mainmenu a:hover{ color:#ffffff; background-color:#2e9afe; } #mainmenu ul li{ display:inline-block; position: relative; } #mainmenu ul ul { background-color: #eee; display: none; width: 133px; height: auto; position: absolute; border: solid 1px #ddd; top: 23px; } #mainmenu ul li:hover > ul{ display:block; padding:0; margin:5px 0 10px 0; list-style-type:none; border:solid 2px #ddd; font-size:18px; text-transform:uppercase; } #mainmenu ul ul li:hover a{ color:#ffffff; background-color:#2e9afe; } #mainmenu ul ul li:hover { cursor:pointer; } #mainmenu ul ul li { float:none; padding:10px; } #mainmenu ul ul li{ font-size:16px; padding:0 10px; }
Comments
Post a Comment