i18n drop menu hotlink only on text?

[j*z]

Has anyone found a work-around for this issue:

Thie i18n menu will only hyperlink the text that is in the drop menu, and not the full drop menu item "box" itself. In other words, if you click to the right or left of the text in a drop menu, it is not hyperlinked.

image attached.

[Psychosopher]

This is not an issue. It is the definition of the css.

Which template do you use? Or can you give a link to your website?

[mvlcek]

Has anyone found a work-around for this issue:

Thie i18n menu will only hyperlink the text that is in the drop menu, and not the full drop menu item "box" itself. In other words, if you click to the right or left of the text in a drop menu, it is not hyperlinked.

Use custom rendering.
But I don't think HTML allows you to put a <ul> inside a <a> (also browsers will probably render it).

[j*z]

Thanks for your replies. This link will illustrate the issue on a test site I created, custom template.
http://yoga-center.org/CMS/

Custom Rendering looks a little complicated at the moment, but I'll give it a try if I can't find another work around.

[Psychosopher]

The easiest way to fix this, if you could mail me the template file and the css file.

It's easier than analysing what's going on or wrong.

[yojoe]

Display the 'a' elements in your drop down menu to as a block items in css.
Anchors are by default an inline elements.
And add padding directly to them, not to 'li' elements.

[Psychosopher]

Display the 'a' elements in your drop down menu to as a block items in css.

I copied in the meantime the page. The problem seems to be that the CSS for the navigation is very nested.

When you display the a-tag as block, then there are a lot of margins and paddings. I think because of this the block becomes very small.

[j*z]

Display the 'a' elements in your drop down menu to as a block items in css.
Anchors are by default an inline elements.
And add padding directly to them, not to 'li' elements.

I added display: block; to any CSS involved in the drop menu, but that didn't have any effect. Where were you suggesting I put the display: block?

---

Display the 'a' elements in your drop down menu to as a block items in css.

I copied in the meantime the page. The problem seems to be that the CSS for the navigation is very nested.

When you display the a-tag as block, then there are a lot of margins and paddings. I think because of this the block becomes very small.

Thanks for your help Psychosopher.
I removed all the margins and padding with the drop down menu but still just the text in the drop down was hyperlinked. The drop menu box itself was not. (I put the padding back in after I was done testing)

I call the menu from my template page like this:
<div class="sitemenu">
<ul><?php get_i18n_navigation(return_page_slug(),0,1,I18N_SHOW_MENU); ?></ul>

I'm attaching the CSS for the menu.

[Psychosopher]

I will again tomorrow have a look at it.

[Psychosopher]

After testing a little bit I think the problem are the margins. The margins do only show "display:block" for the links, but not the menu fields.

You can see this if you replace for example

Code:

.sitemenu li:hover ul li:hover a {
  color: #4e3133;
  padding:0; /* seems to only create padding at left */
  margin:10px 10px 10px 10px;
}

with

Code:

.sitemenu li:hover ul li:hover a {
  display:block;
  color: #4e3133;
  padding:0; /* seems to only create padding at left */
  margin:0;
}

So I think the menu boxes should be rebuilt.

[j*z]

Thanks mvlcek, Joe and Psychosopher for your tips. I removed all the padding and margin and the hyperlink works correctly now. However, that made it hard to control my padding. I created a width of 110%, centered my text, and forced the height to 25px. That got me close to where I wanted to be visually, but the link text will align to the top.

Joe mentioned the "a" elements can be styled and I tried that. This looks great and I tested it cross browser + platform, so I'd say it's a fix.

.sitemenu li ul li a:link {padding-top:5px;display:block;}
.sitemenu li ul li a:visited {padding-top:5px;display:block;}
.sitemenu li ul li a:hover {padding-top:5px;display:block;}
.sitemenu li ul li:hover a:link {padding-top:5px;display:block;}
.sitemenu li ul li:hover a:visited {padding-top:5px;display:block;}
.sitemenu li ul li:hover a:hover {padding-top:5px;display:block;}

"mvlcek" suggested Custom Rendering but that looks to be outside my skill-set.