Dropdown menu

HTML & CSS
1

Hello there,

I know this is probably a simple fix but this template I downloaded for my wordpress site does not allow dropdown menus. I found this out after trying to consolidate the menu.

Can someone help with my menu css code quick? The website is here: www.youdothemathtutoring.com

Thanks,
Lorne


#menu_container { border-top: 1px solid #DDD; border-bottom: 5px solid #DDD; }

#menu_container ul { list-style-type: none; float: left; margin-left: 15px; padding: 3px 0; }

#menu_container ul li { float: left; font-size: 13px; margin: 0 5px; }

#menu_container ul li a { display: block; text-decoration: none; color: #000; padding: 5px 10px; }

#menu_container ul li a:hover { background-color: #000; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }

#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a  { background-color: #000; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }

#menu_container ul.cat_list { border-left: 1px solid #DDD; margin-left: 5px; padding-left: 5px; }
2

this template I downloaded for my wordpress site does not allow drop down menus. I found this out after trying to consolidate the menu.

Do you mean the PHP doesn’t build nested ULs? If so, then you will need to recode the template pages themselves. Speaking of which, for some reason your theme is outputting the menu twice.

Other than that the following CSS should get your menu dropping down…


#menu_container { border-top: 1px solid #DDD; border-bottom: 5px solid #DDD; float:left; width:100%; padding:0; margin:0}

#menu_container ul { list-style-type: none; float: left; margin-left: 15px; padding: 3px 0; }

#menu_container>ul>li { float: left; font-size: 13px; margin: 0 5px; position: relative }

#menu_container>ul>li a { display: block; text-decoration: none; color: #000; padding: 5px 10px; }

#menu_container  li:hover>a { background-color: red; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }

#menu_container ul>li.current-menu-item a, #menu_container ul li.current_page_item a  { background-color: #000; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }

#menu_container ul.cat_list { border-left: 1px solid #DDD; margin-left: 5px; padding-left: 5px;}
#menu_container ul.sub-menu {  position: absolute; left: -9999em; }
#menu_container li:hover ul.sub-menu {   left: -20px; }

Hope that helps

3

Worked like a charm thanks!

I also don’t know why that template is producing 2 menus, but I just hide one.

4

You are welcome.

I also don’t know why that template is producing 2 menus, but I just hide one.

W/O beign able to explore your theme files I can’t give you a definite answer but I would check: header.php or index.php … look for <div id=“menu_container”>… then make sure you havent doubled up functions like : wp_menu(), or wp_list_pages(),wp_page_menu() or get_pages()