37 users online (1 members and 36 guests)  


  Results 1 to 2 of 2

Related

  1. submenu    Forum: Myspace Forum
    Replies: 4
  2. Replies: 0
  1. #1
    acgna's Avatar
    New User

    Status
    Offline
    Join Date
    May 2008
    Posts
    7

    CSS Submenu Wierdness

    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!

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: CSS Submenu Wierdness

    The least intrusive way to do it that I can see is for you to move away from the divs and use UL/LI instead. A good example of this is at cssplay. I have reworked the HTML to show you better what would be needed, and you can use the CSS at the above link to format the menu the way you need it to be.

    HTML Code:
    <div style="width:550px; height:28px;float:right;" id="chromemenu">
    <ul>
    	<li class='nav1'><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="28" border="0" /></a>
    		<ul>
    			<li class="subnav1"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav2"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav3"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav4"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav5"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav6"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    		</ul>
    	</li>
    	<li class="nav2"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="159" height="28" border="0" align="left" /></a></li>
    	<li class="nav3"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="131" height="28" border="0" /></a></li>
    	<li class="nav4"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="66" height="28" border="0" /></a></li>
    	<li class="nav5"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="65" height="28" border="0" /></a>
    		<ul>
    			<li class="subnav21"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav22"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav23"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav24"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav25"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    			<li class="subnav26"><a href="#"><img src="images/NavigationImages/TopMenu/trans.gif" width="129" height="25" border="0" /></a></li>
    		</ul>
    	</li>
    </ul>
    </div>
    
    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
    This will do everything you need it to from keeping the submenu in the correct location to keeping the "More" menu item highlighted when you are hovering over the submenus.

    One of the nice things about this method is that you can use the CSS pseudo-classes (a:link, a:visited, a:hover) to change the images as needed rather than the img tag. This is more flexible than the img tag. Also, unless it is needed for something else, you can get rid of the javascript. The CSS will take care of displaying the menu.

    Let me know if this helps.



Tags for this Thread