CSS Submenu Wierdness

[acgna]

Hi,

I'm so close to being done with my site but I have these couple issues remaining and I can't figure them out! its driving me bananas.

The menu can be viewed here: http://eccolo.com/Site2/index4.html

the problem is in the "more" submenu. it works fine when rolling over however, when you make the browser window smaller it changes position. I need it to stay in its original position.

Also, both on "our menus" and "More" buttons, I need the buttons to stay on the rollover state when the mouse moves to the sub menu.

Any help with this would be highly appreciated! Let me know If you would like to see the files, I will post the code below.

CSS:

.dropmenudiv2{
margin-left:-64px;/* this is the margin of More submenu tab */
position:absolute;
top: 0;
z-index:102;
width: 129px;
visibility: hidden;
}


HTML:

<div class="nav5"><a href="#" rel="dropmenu2"><img src="images/NavigationImages/TopMenu/trans.gif" width="65" height="28" border="0" /></a></div>


Thanks!

[Boogle]

Have you used crappy dreamweaver autogenerator for those dropdown menus?

Look here for much better ones

Those dreamweaver ones stink if you ask me (I could upset a few people there but it's MO )

Boog's

[acgna]

Dreamweaver is very ugly, I agree.

http://www.dynamicdrive.com/dynamici...rome/index.htm

this seems like its exactly what I want however, how would I have the button on the menu stay in the rollover state while the mouse moves to the submenus?

[Boogle]

OK do the following to achieve this:

CSS: in your css stylesheet (chromstyle.css) insert the following:

.hoverstay{background: url(chromebg-over.gif) center center repeat-x;}

javascript: Then add this javascript to the head of your HTML page:

<script type="text/javascript">
    function KeepTopHovered()
    {
        document.getElementById("dropStay").className = "hoverstay";
    }
    function Reset()
    {
        document.getElementById("dropStay").className = "";
    }
</script>

HTML: Now add this the parts where i've highlighted:

<div class="chromestyle" id="chromemenu">
            <ul>
            <li><a href="http://www.dynamicdrive.com">Home</a></li>
            <li id="dropStay" class=""><a href="#" rel="dropmenu1">Resources</a></li>
            <li><a href="#" rel="dropmenu2">News</a></li>
            </ul>
            </div>

            <!--1st drop down menu --> 
            <div id="dropmenu1" class="dropmenudiv">
            <a onmousemove="KeepTopHovered();" onmouseout="Reset();" href="http://www.dynamicdrive.com/">Dynamic Drive</a>
            <a onmousemove="KeepTopHovered();" onmouseout="Reset();" href="http://www.cssdrive.com">CSS Drive</a>
            <a onmousemove="KeepTopHovered();" onmouseout="Reset();" href="http://www.javascriptkit.com">JavaScript Kit</a>
            </div>


            <!--2nd drop down menu --> 
            <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
            <a href="http://www.cnn.com/">CNN</a>
            <a href="http://www.msnbc.com">MSNBC</a>
            <a href="http://news.bbc.co.uk">BBC News</a>
            </div>

            <script type="text/javascript">
            cssdropdown.startchrome("chromemenu")
            </script>

That will enable the menuItem, which has the text "Resources" to stay coloured in when browsing it's sub menu.

HTH's

Boog's

[acgna]

thank you very much, I will try this today.