Ask your WordPress questions! Pay money and get answers fast! (more info)

Make drop down menu horizontal and static

  • SOLVED

I am trying to make a horizontal menu, at the moment it is a vertical drop down menu.

I need it to work more like:
http://www.erdem.com/home.php

Currently my website is like the image shown below:

Here is my CSS:
#menu_container { padding: 5px 0; text-align: center; }
#menu_container ul { list-style-type: none; margin: 0; padding: 0; text-align: center; }
#menu_container ul li { margin-left: 15px; font-family: courier new; font-weight: normal; font-size: 1em; color: #000; position: relative; padding-bottom: 10px; text-transform: uppercase; display: inline-block; letter-spacing:1px; text-align:center; }
#menu_container ul li:first-child { margin-left: 0;}
#menu_container ul li a { color: #000; text-decoration: none; display:inline-block; padding:5px; border-radius: 0px;}
#menu_container ul li a:hover { color: #000; -webkit-transition: background 0.5sease;-moz-transition: background 0.5sease;-ms-transition: background 0.5sease;-o-transition: background 0.5sease;transition: background 0.5sease;}
#menu_container ul li.current-menu-item a,
#menu_container ul li.current_page_item a { color: #b9b9b9;}
#menu_container ul li ul { position: absolute; top: 35px; left: 0; padding: 1px 1px; z-index: 25; display: none; border-radius: 3px; text-align: left; }
#main_container ul.menu > li > a:hover, #main_containter ul.menu > li > a:active, #main_container ul.menu > li.current > a {background: url("") repeat-x scroll 0px 15px transparent;}

#menu_container ul li ul li { width: 150px; font-size: 12px; margin: 0; padding: 4px 2px 4px 2px; background-color: #FFF; }
#menu_container ul li ul li a:hover { background-color: #FFF; }
#menu_container ul li ul li:first-child { border-top: none; }
#menu_container ul li.current-menu-item ul li a,
#menu_container ul li.current_page_item ul li a { color: #9f9f9f; border-bottom: none; }
#menu_container ul li ul li.current-menu-item a,
#menu_container ul li ul li.current_page_item a,
#menu_container ul li ul li a { color: #9f9f9f; border-bottom: none; }
#menu_container ul li ul li.current-menu-item a:hover,
#menu_container ul li ul li.current_page_item a:hover,
#menu_container ul li ul li a:hover { border-bottom: none; color: #ccc; }

Answers (3)

2013-12-18

Sai kumar answers:

Hi,

Just change these two changes in your css

#menu_container ul li ul { width:400px; position: absolute; top: 35px; left: 0; padding: 1px 1px; z-index: 25; display: none; border-radius: 3px; text-align: left; }

#menu_container ul li ul li { width: 150px; font-size: 12px; margin: 0; padding: 4px 2px 4px 2px; background-color: #FFF; display:inline }

It will be alright


Emma comments:

Hi that worked.
However i need it to be static when clicked.


Sai kumar comments:

Ok, please wait.


Sai kumar comments:

Please wait. Need to have some changes with your script.js file. Please wait


Sai kumar comments:

Hi,

You can do sub menu static using custom fields in wordpress. That will be better i think. I just go through your css and script. Better you make custom field in wordpress and do the rest.

If you dont mind please give me your WP credential for a while. I will correct it.

Otherwise i will explain it, but i don't think how much i can express the actual while explaining. That's why i demand credential. If you are ready then send it to : [email protected]


Sai kumar comments:

Please check your mail


Sai kumar comments:

All those were fixed. I think its all finished now. Have a nice session with your work. Thanks

2013-12-18

Arnav Joy answers:

Can you us url of your site please


Emma comments:

http://sirette.com/portfolio

2013-12-18

Balanean Corneliu answers:

Why you don't use a plugin to make a nice menu :
http://wordpress.org/plugins/dropdown-menu-widget/


Emma comments:

It doesnt do exactly what i need.