Drop-Down Menu

[mwdewitt]

How do I make a drop-down menu with HTML and CSS on this website? I only need one drop-down menu, with two sub-menus. I want a drop-down menu to come from “Graphic Novels & Novellas” with “Feel Good Candy” and “Gloom” as sub-menus. Please help!

Edit: And yes, I have done a Google search. I tried about twenty different methods and I could never get it to work. I am using WordPress and it has a menu function that is supposed to make menu making a breeze. Yeah, not so much.

Edit: There is a new question down towards the bottom. I did not want to make a new thread again.

[mwdewitt]

How would I go about implementing any of those designs? I am sorry, I am a novice. I do not know how to use more than one CSS file per WordPress website…or how to reference it, for that matter.

[mwdewitt]

@stevencrader: Thank you! I am somewhat getting there. You can view my progress live: here.

@Hompimpa: Thank you for your help, but I think the person before you nailed it. Thanks once again!

[mwdewitt]

Okay, so I got the drop-down menu to work (sort of), but it seems to have broken other parts of my website.

The various menu navigation options are supposed to turn white when you roll over them and then, once you have selected the page, the word should stay highlighted. Currently, only “Store” and “Donations” do that. The rest are doing whatever the hell they want to do. How do I fix this?

“Store” and “Donations” should also be flush with the left-side of the website. Side by side, not on top of each other.

Also, how can I format my drop-down menu so that the menu navigation option “Graphic Novels & Novellas” is separated more from the drop-down menu items, “Feel Good Candy” and “Gloom?” Also, if this is possible, I would like to put a one pixel line between the three selections. Like I said, if that is even possible.

Personally, I am satisfied for the moment, but I know when I wake up tomorrow I am going to want to fix all of this. I am just happy that I was able to do it with pure HTML and CSS hard coding.

Thank you again for all the wonderful help you people have given me. I do not know what I would do without you!

Edit: I forgot to put a link to my website. Oops! Here you go: here.

Edit: And wow, that is a lot of crap I am asking about. Well, if anyone knows the solution to one or all of my questions, please do not be shy! Basically, if I can get all of this working, my website will look how I first envisioned it. Thank you!

[Billy]

There is a slight problem with your hovering 31M1K97; it’s very flickery.
I have made one here.

[Billy]

It still flickers a lot for me 31M1K97. Did you make the hover on the text and not on the li ?
Thanks for the animation tip though; I’ve been trying to find a way of doing it. Height starts from the centre, but opacity seems nice.

[mwdewitt]

Thank you, everyone, so much for being so supportive. I think I have enough now to handle a drop-down menu. I am still going to try and keep it purely HTML and CSS, with no JavaScript, that way more people can view my drop-down. Thank you once again.

Edit: I have one little, tiny question left to ask. Right now, if you select an item in the drop-down it highlights that item, but how do I get “Novellas & Graphic Novels” to stay highlighted when you select one of the items in the drop-down menu so that the person knows that they are on a page that is under the drop-down? Thank you once again!

[mwdewitt]

@stevencrader: I have tried messing around with the menu system in WordPress and I can never get it to work properly. If I could get it to work, that would make making a drop-down menu so much easier because there are tons of plug-ins for making drop-down menus and I would not have this problem on my hands.

@31M1K97: I need direct code that I can copy and paste into my CSS. I am a novice and if you are willing to look at the CSS I already have implemented on my website (here) and augment it somehow, it would be greatly appreciated. Right now, “Novellas & Graphic Novels” has an id of “#,” which I do not think I can do much with.

Edit: And thank you, @stevencrader, for that amazing code. That cleaned up mine a lot. See, that is what I mean by direct code. I am editing it now to better fit my needs. Thank you, once again!

Edit: Okay, see my website: here. How do I get “Gloom” below “Feel Good Candy?” I changed the width of the drop-down to 266 pixels, so that it would span the length of the title “Novellas & Graphic Novels,” but now the two sub-menus are side by side, which does not look bad, it is just not what I want. And another thing, when I change the height on “#menu-bar” to 30, so that the side bar and introductory paragraph are 14 pixels away from the menu, it shifts everything out of position. How do I make it so that the spacing is still 14 pixels between the menu and page information? If you have not noticed, 14 pixels is the general spacing for everything on the website. So, it is a little important for continuity’s sake. And one last thing, once I get “Gloom” on top of “Feel Good Candy,” how do I add this between “Novellas & Graphic Novels,” “Gloom,” and “Feel Good Candy?” Thank you for everything you guys have done thus far! Your help is greatly appreciated!

[mwdewitt]

@31M1K97: Would I put that code in my “/js/” folder? Also, how do I activate it and where? In my “functions.php” folder?

@stevencrader: Thank you once again. Now, how do I make the drop-down divider appear between “Graphic Novels & Written Novellas” and “Feel Good Candy” on drop-down? Because that only makes it appear between “Feel Good Candy” and “Gloom.” I tried a few methods, like giving “Graphic Novels & Written Novellas” an ID of “literature” and I tried to use the same code that you gave me for “Feel Good Candy,” but it did not work. Also, what is controlling the spacing between “Graphic Novels & Written Novellas,” “Feel Good Candy,” and “Gloom?” I would like to make it so that the spacing is the same between all three titles, with the drop-down divider an equal amount from each title. Thank you, once again! I think I will do a tribute blog post on my new website thanking everyone for their wonderful help!

Edit: Here is a mock-up of what I mean about the drop-down menu: here. I hope that makes a little more sense.

[mwdewitt]

@stevencrader: Thank you so much for stickin’ in there with me. I do believe my drop-down menu is complete. Thank you for all the help you have given me!

Edit: Wait, wait, wait! One more tiny question. I noticed that “Home” is the logo and sidebar. I realize this is happening because of this:

#menu-bar ul a {

padding: 10px 10px;

}

Now, I tried to make negative ten pixels on margin-left, but that pushes everything ten pixels to the left. How do I line up “Home” with everything else on the left side? Okay, that should be my last question. Sheesh!

[mwdewitt]

Haha! Yeah, I would have never figured that out. Thank you, man! Okay, I am officially done with this menu.

[mitultechs]

@Hompimpa Thanks for sharing. Its really great one. My problems get solved.

[Author]

Posts