Hello, I have successfully implemented a responsive menu system on my website. However, I am now looking to rearrange the URLs in a different way. Please refer to my dropdown menu example here: http://jsfiddle.net/Et2HB/
What I am trying to achieve is to assign Main Menu 1, Main Menu 2, and Main Menu 3 to separate links such as www.example1.com and www.example2.com. I want the dropdown function to appear just above the right-down arrow (nav_sprite.png) which is not represented in the provided jsfiddle example. You can see the necessary styling for this in the code snippet below:
ul#menu li.hasChildren a > span {
background: url(../images/nav_sprite.png);
background-position: right 0px !important;
background-repeat: no-repeat;
background-size: 30px auto;
}
I attempted to add another anchor tag to accommodate the dropdown functionality but faced challenges with aligning them properly using float left and float right CSS properties. The layout ended up collapsing and causing issues. Here's an example of what I tried:
<li><a href="http://www.example.com">Main Menu 1</a><a href="#" tabindex="1" accesskey="h"> </a>
<ul>
....
If you have any suggestions or solutions to help me resolve this issue, I would greatly appreciate your input.
Thank you, Paul