Position menu in existing website

[Ronald]

I have an existing website which I edit using Expression Web 4 (template of the website wasdownloaded).
I want to replace the standard (basic) menu with the Kendo Menu. The Kendo Menu is working but I can't get it positioned in the same spot as the original menu.
The style of the original menu was:

#hmenu {

    float:right;

    margin-top: 38px;

    text-align: right;

    margin-right: 20px;

}

This positions the menu to the right hand side and near the top.
I replaced it with the Kendo Menu and am still using hmenu as the id for the div that holds the menu and inserted some inline style as well but the Kendo Menu is displayed lower and on the left-hand side.

<div id="hmenu">

    <ul id="k-menu" class="k-content" style="float:right; margin-top:38px; margin-right:20px">

        <li><a href="index.html">Home</a></li>

        <li>Products

            <ul>

                <li><a href="products.html">Products</a>

Any ideas/tips?
thanks
Ronald

[Dimo]

Hello Ronald,

I can't verify this as I don't have a runnable web page, but generally, since the #hmenu <div> still exists on the page, you should not need its styles applied also on the Kendo menu. Please remove the inline styles from the #k-menu <ul>.

For fine-tuning, please inspect the page HTML source with Firebug to see what additional styles may need to be applied. Let me know if you need further assistance related to the Kendo widget.

All the best,
Dimo
the Telerik team

[Ronald]

Hi Dimo,

thanks for your reply. I'm not very experienced with CSS so I'm having a bit of a difficult time getting my head around this one :-)

I did do some cleanup and I now have a very strange result.
When the page loads the Kendo Menu is positioned where I want it to be.
However, the instant I move the mouse cursor onto the page (my cursor is positioned on the "refresh" button in the IE address bar and then I move the cursor onto the page) the Kendo Menu jumps to another position in the page (it moves lower and floats left).

I have added the webpage (index_new.html) and also the page with the orginal basic menu (index_old.html) and dependency files.
I would appreciate if you could have a look at this one.

thanks
Ronald

[Dimo]

Hello Ronald,

In my opinion the problem is caused by buggy browser behavior. As a workaround, you can apply explicit width to the #hmenu div. In this way the Keno menu will be unable to expand and fall down.

By the way, you have some HTML validation errors, which may sometimes caused unexpected issues as well.

Kind regards,
Dimo
the Telerik team

[Ronald]

Setting the width in the style declaration did the trick!

I am using IE9 (updates installed) as a browser.

I am wondering if the next behaviour is also caused by IE9 and if there is a cure for it :-)
When I hover (just move the cursor up and down) between the submenus of the second menu topic (Products) the submenu attached to the first submenu of Products first open on the right hand side with the 3 items vertically listed and the next time it opens on the left hand side showing the items in 2 columns and then it opens back on the right hand side and so on, alternating between right/vertical and left/2 columns ???

Ronald

[Dimo]

Hello Ronald,

I did not manage to make the Menu items from the inner subgroup open to the left, they always open to the right...?

All the best,
Dimo
the Telerik team

[Ronald]

Hi Dimo,

it is easy for me :-)
I move the mouse cursor between the first and second submenu and get a different behaviour that always repeats itself.
I have attached screen shots of what is happening.
I have asked a colleague to run the page and he has similar behaviour.
We're both running IE9 ...

cheers
Ronald

[Dimo]

Hello Ronald,

Please see the attached video and let me know if I am missing something. I am also attaching the test page.

Kind regards,
Dimo
the Telerik team

[Ronald]

Hi Dimo,

you are my new hero!!

Thanks for all your support.

Ronald