• Resolved azkaps

    (@azkaps)


    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 https://www.aamerkapadia.com/blog any help would be appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter azkaps

    (@azkaps)

    nobody?

    Moderator cubecolour

    (@numeeja)

    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;
    }

    Thread Starter azkaps

    (@azkaps)

    that really helped! thanks for your help and effort ??

    Moderator cubecolour

    (@numeeja)

    You’re welcome :o)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dropdown menus acting wonky!’ is closed to new replies.