Page 1 of 1

position the sub menu

Posted: Wed Feb 27, 2008 12:29 am
by TJINAK
Hello,

I'm having problems with users complaining about my sub menu extending down below the bottom of their veiwing area.  Please see attached photo.

I'm not sure what the proper solution may be here.  Can I adjust the position of the second level menu in my css?  Perhaps making the second level appears centered on top level:

          ->Second level
          ->Second level
          ->Second level
Top    ->Second level
          ->Second level
          ->Second level
          ->Second level



Thank you for reading.  Here is the css for navigation:

Code: Select all

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */
#menuwrapper { 
   width: 100%; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
   width: 100%; 
   margin-left: -1px;
}
#primary-nav ul { 
   position: absolute; 
   top: 0; 
   left: 100%; 
   display: none; 
}
#primary-nav li { 
   margin-bottom: -4px; 
   position: relative;
}


/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   border: 1px solid #383637; /* Border color of menu */
   display: block; 
   margin: 0px; 
   padding: 5px 10px; 
   color: #383637; /* text color /*
   text-decoration: none; 
   background: transparent; 
   min-height:1em;    /* Fixes IE7 whitespace bug*/ 
}
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #fff; 
   min-height:1em;   /* Fixes IE7 bug*/
   display: block; 
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive { 
   background-color: #fff; 
   display: block; 
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #E7AB0B; 
   display: block; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
   border-left: 1px solid #006699; 
   border-top: 1px solid #006699; 
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0.5em;
   background-color: #fff;
   margin: 0;
   width: 100%;
}


/* separator */
#primary-nav li hr.separator {
   display:block;
   height: 0.5em;
   color: #abb0b6;
   background-color: #abb0b6;
   width: 100%;
   border:0;
   margin:0;
   padding:0;   
   border-top: 1px solid #006699;
   border-right: 1px solid #006699;
}

Thank you,

TJ

Re: position the sub menu

Posted: Wed Feb 27, 2008 12:47 am
by TJINAK
I found a way to move my second level up by adjusting the top margin of #primary-nav ul  to a negative percentage.  Is there a better way I could handle this?

Code: Select all


#primary-nav ul { 
   position: absolute; 
   [color=red]margin: -70% 0 0 0; [/color]
   top: 0; 
   left: 100%; 
   display: none; 
}

Here is my working test page:

http://www.redoubtrealty.com/index.php?page=_new-home

Thank you,

TJ

Re: position the sub menu

Posted: Wed Feb 27, 2008 4:51 am
by Dr.CSS
A very unusual thing to do or complain about but no there is no other way to do it...