Dropdown menus acting wonky!
-
I’m not too well versed with CSS but I’m pretty sure the problem is my fault. While messing around with my theme in the editor, I think I must have accidentally changed the padding options for my drop down menus. As a result they now overlap the menu title and don’t look so good.
my website is http://www.aamerkapadia.com/blog any help would be appreciated!
-
nobody?
OK you need to go into your style.php in your theme, make a backup of it in case you don’t like my edits & then replace all the menu stuff from
#menu { list-style:none;to
#menu ul li a:hover {color:#000;}with this
#menu { list-style:none; margin:0; padding:0 0 0px 24px; height:0%; } #menu:after { content:" "; display:block; clear:both; } #menu li { padding: 7px; margin-right: 30px; float:left; } #menu li a { float:left; text-align:center; text-decoration:none; } #menu li:hover { position: relative; background:#e9e6dd; } #menu li.hover ul, #menu li:hover ul { display: block; } #menu ul { padding:16px 0 0 0; margin: 0; list-style:none; width:147px; display: none; position: absolute; top: 10px; left: 0; } #menu ul li { padding:6px; width:120px; background:#e9e6dd; } #menu ul li a { text-align:left; width:100%; background:none; color:#7a7a7a; line-height:18px; height:auto; display:block; } #menu ul li a:hover {color:#000;}I have only looked at this in the current version of firefox OSX, so I have no idea what it looks like in other browsers.
Apart from the positioning, I have also applied the drop-down menu colour to the top level menu items on hover – but its easy to remove if you don’t want that, just change
#menu li:hover { position: relative; background:#e9e6dd; }to
#menu li:hover { position: relative; }that really helped! thanks for your help and effort 😀
You’re welcome :o)
The topic ‘Dropdown menus acting wonky!’ is closed to new replies.