Convert mouseovertabs to vertical?

[PaulBinCT]

1) Script Title: mouseovertabs menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...seovertabs.htm

3) Describe problem:

Hi all,

I'm trying to use the mouseovertabs menu, but style it with the submenu arranged as a vertical (and above, no less). I thought this would be a simple thing but I'm having no luck at all. Any suggestions would be very welcome!

Thanks!

[Beverleyh]

I recommend you read up on CSS floats. Here is a an article, with demos, to get you started http://alistapart.com/article/css-floats-101

If you need more help, please post a link to your page, with the changes you have made, explaining clearly which aspect is not working as expected. You can provide screen caps/mockups as needed, to illustrate problems or ideals. If your website is not yet fully live, that's ok - you can setup a reduced test case for us to troubleshoot instead. At the end of the day, if you would like help, you need to make it easy for people to help you

[vwphillips]

css

/* ######### CSS for sub menu container below ######### */

.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 150px;
padding: 5px;
border: 1px solid silver;
}

.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenucontentclass2 li{
float: left;
margin-right: 1em;
}


html

<div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>
<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
</ul>
</div>

[PaulBinCT]

Thanks Vic, and Beverley for your time...

So here's what I have so far:

http://removed

As you'll see, only the first two main menu items are wired up at all, but the submenu is displaying below and inline.
If either of you can get me started at least, I'd be deeply grateful. There's clearly something about the CSS in this menu that's eluding me... needless to say

BTW Vic, I did try your very kind contribution but it doesn't appear to work

[Beverleyh]

Your "submenucontents.htm" is a complete web page and it doesn't need to be - it just needs to be an HTML fragment. Have another look at the demo for the correct format. Once that's corrected, it will make troubleshooting easier.

[PaulBinCT]

OK... Let me go rerere-read it and check back. Thank you.

[Beverleyh]

Just wondering - why have you chosen this menu if you are going to change key characteristics? Wouldn't it be easier to choose a menu with linear dropdowns and then edit that to go upwards? Why start off with this particular one?

You can create "drop up" menus pretty easily with CSS. Here's a quick demo I set up: http://jsfiddle.net/Lw6696uq/

[PaulBinCT]

LOL... very logical question Beverley I was using it because I had used it a few times previously and was quite successful styling it, so I thought I would find it pretty "simple". In point of fact, I just decided to start over with a different product and I'm nearly done.

So, thanks again, to you both and feel free to mark this case closed