My style.css must be retarded (or I am)

Ok, as previously mentioned, it is important to target selectors specifically. So, add this:

#content .entry #my-header ul ul,
#content .entry #my-header ul ul ul {
padding: 0;
margin: 0;
}

And you will need to remove all the negative margins you added to get all the lists to line up correctly…

I see…

But then the 2nd submenu dissapears instead of going popping to the right.

Also this coding means that one has to be really careful about specifying selectors. I’m finding difficult to get it right.

This is my entire code for the menu:

#my-header {
	margin:auto;
	width:800px;
	font-family: 'Droid Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
}

#content .entry #my-header ul {
	list-style: none;
}

#content .entry #my-header ul ul,
#content .entry #my-header ul ul ul {
padding: 0;
margin: 0;
}

.my-menu li a {
	background-color:#fcfcfc;
	color:#184c76;
	text-decoration:none;
	padding:10px 15px;
	display:block;
	border-left: 1px solid #c9c9c9;
	border-right: 1px solid #c9c9c9;
	border-top: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
}

.my-menu li a:hover {
	background-color:#cccccc;
	color:#000000;
}

.my-menu > li {
	float:left;
}

.my-menu li ul {
	display:none;
	position:absolute;
	min-width:140px;
}

.my-menu li:hover > ul {
	display:block;
}

.my-menu li ul li  {
	position:relative;
}

/*.my-menu li ul li ul {
	right:-140px;
	top:0px;
}*/

I also have another question: I want the same arrow-down image that is in the main menu of the theme. The original code in the style.css was:

#gazpo-nav li.submenu>a{
	background: url(images/arrow_down.png) no-repeat 98% 50%;
}

so I’ve written:

#my-menu li > a {
	background: url(images/arrow_down.png) no-repeat 98% 50%;
}

but it doesn’t work.

Last thing was solved.

It’s not #my-menu. It’s #my-header or .my-menu ??

Is there any way of hiding these arrows IF there is no submenu in any menu block?

Creating a multi tier css styled navigation menu is complicated. You are doing very well so far.

You need to add the following to get your 3rd tier to show to the right of your dropdown (the first selector is shown for reference only):

.my-menu li ul li  {
	position:relative;
}
.my-menu li li ul {
	position:absolute;
    top:0;
    left:100%;
}

It worked perfectly.

I really thank you for all your help.

Is there any way of hiding these arrows IF there is no submenu in any menu block?

For easier read-ability I would suggest adding a white background to your list(s) as such (full selector shown for reference, find add add the background…):

#content .entry #my-header ul {
	list-style: none;
	background-color: #FFF;
}

Then to remove the arrows from “childless” li add this to the bottom:

.my-menu li > a:only-child { background-image: none; }

Thanks DMBarber,

While you wrote your last post, I did this:

.my-menu li > a {
	background:#fcfcfc url(images/arrow_down.png) no-repeat 98% 50%;
}

.my-menu li ul li > a {
	background:#fcfcfc url(images/arrow_right.png) no-repeat 98% 50%;
}

which seems to work well.

You’re coding for the arrows works like a charm too.

Well, I think I’m done for the 1.0 version of this menu. The only thing left is to adapt some little details from the theme’s original main menu. I will try this tomorrow. Let’s see if I can solve everything by myself.

DMBarber, I owe you a 6-pack…

Glad to help. All the best!

Right, this is the entire code:

#my-header {
	margin:auto;
	width:800px;
	font-family: 'Droid Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
}

#content .entry #my-header ul {
	list-style: none;
}

#content .entry #my-header ul ul,
#content .entry #my-header ul ul ul {
padding: 0;
margin: 0;
}

.my-menu li a {
	background-color:#fcfcfc;
	color:#184c76;
	text-decoration:none;
	padding:10px 15px;
	display:block;
	border-left: 1px solid #c9c9c9;
	border-right: 1px solid #c9c9c9;
	border-top: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
}

.my-menu li a:hover {
	background-color:#cccccc;
	color:#000000;
}

.my-menu > li {
	float:left;
}

.my-menu li ul li  {
	position:relative;
}
.my-menu li li ul {
	position:absolute;
    top:0;
    left:100%;
}

.my-menu li ul {
	display:none;
	position:absolute;
	min-width:140px;
}

.my-menu li:hover > ul {
	display:block;
}

.my-menu li ul li  {
	position:relative;
}

/*.my-menu li ul li ul {
	right:-140px;
	top:0px;
}*/

.my-menu li > a {
	background:#fcfcfc url(images/arrow_down.png) no-repeat 98% 50%;
}

.my-menu li ul li > a {
	background:#fcfcfc url(images/arrow_right.png) no-repeat 98% 50%;
}

.my-menu li > a:only-child {

	background-image: none;
}

But the result isn’t good enough with the alingment, as it can be seen at https://www.drumscult.com/es/sin_categoria/menu-drummers/

It doesn’t fit well. If I expand the 800px width, it goes off the page, so the menu has to go to the left.

Also the arrows at the end of the block titles are too close to the titles.

One last help anybody?

Ok, I’ve solved the arrows being too close to the titles, but the right-border is now too close to these arrows. Ummm…

The absolute positioning of your arrows is controlled here:

url(images/arrow_right.png) no-repeat 96% 50%;

which translates to:

url(images/arrow_right.png) no-repeat [DISTANCE FROM LEFT SIDE] [DISTANCE FROM TOP SIDE];

Adjust accordingly. Also, I do not think this is working for you:

.my-menu li > a {
	background:#fcfcfc url(images/arrow_down.png) no-repeat 96% 50% padding:0px 20px;;
}

It should be:

.my-menu li > a {
background-color:#fcfcfc;
background: url(images/arrow_down.png) no-repeat 96% 50%;
 padding:0px 20px;
}

That is why your arrows have disappeared from your first tier of the menu. Fixing that might have some surprising results. You were placing too many styles in one selector.

Yes, you were seeing it while I was trying different things.

Oh, right. I see the surprising results you were talking about. Now I’ll have to play with that…

So the %-%-%-% means left-top-down-right?

2.- The width issue. The menu doesn’t fit well. If I expand the 800px width, it goes off the page, so the menu has to go to the left.

We’re almost done, almost done…

Your menu is coming along nicely. If I might make a suggestion. And this is just in case you do not already know. If I am telling you something you already know, then just ignore it.

First some explanation. Any style with a top, right, bottom, left (example: margin, padding, border) can be written using shortcuts in that order. So rather than writing:

margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;

you can simply write:

margin: [TOP] [RIGHT] [BOTTOM] [LEFT];

or

margin: 0 10px 0 10px;

or even shorter by combining the top and bottom and right and left (if they are equal):

margin: 0 10px;

So, I tell you this, so when you are looking at your code you will understand how to “adjust” the padding, margins, etc.

To get your menu to fit, first change the width from 800px to 100%. Then under #my-header change the font-size to 12px instead of 14px. Finally, adjust the right and left padding of .my-menu li a to maybe 16px or 18px. That should do the trick.