Vertical Hover Menu Adjustment

I have a Vertical Hover Menu that displays sub menus as well.

The second level menus are too far to the right. How do I bring the sub menus left? 

Chris

Hi Chris,

Could you attach your css file?  That way I can give you or more detailed answer.

There may only be a couple places that the Left: position is defined though, so you may just want to search for that and experiment.

John,

I found the css entries for left... when I change the numbers... f5 there does not seem to be any noticable change.

I tried the same page with another machine using IE7 and I find the same results  however Firefox works fine

I do not know what -999em means  but when I put in  100em for example I dont notice any difference.

#nav li ul { /* second-level lists */
    position : absolute;
    left: -999em;
                  background-color:#326ee9;
      margin:-1.9em 0 0 14em;
    border:1px solid #333;
}

#nav li ul ul { /* third-and-above-level lists */
    left: -999em;
    background-color:#d8edfb;
      border:1px solid #333;
}

Let me know if you need the entire css

I am going to try the same css insert on a  non modified dnn-blue template and see what happens

Chris

I get the same results on a stock dnn-blue vert . fixed

#nav ul {
    padding:0;
    margin:0;
    list-style:none;
    float:left;
    width:14.5em;
    background-color:#ffffff;
}

#nav li {
  position: relative;
  float:left;
  line-height : 1.25em;
  width: 14em;
  list-style: none;
}

#nav li ul { /* second-level lists */
    position : absolute;
    left: -50000em;
                  background-color:#326ee9;
      margin:-1.9em 0 0 14em;
    border:1px solid #333;
}

#nav li ul ul { /* third-and-above-level lists */
    left: -50000em;
    background-color:#d8edfb;
      border:1px solid #333;
}

#nav a {
    font-size:1em;
    display:block;
    width: 14em;
    w\idth : 12.5em;
text-align: left;
    text-decoration:none;
    font-weight:bold;
    margin:1px 0 1px 2px;
    padding : 2px 0 2px 6px;
    border:1px solid #ffffff;
    color:#000;
}
#nav li a:hover {
  background-color: #b4dfe8;
  border:1px solid #333;
  color:#000;
}
#nav li a.SelectedTab {
    font-weight:bold;
    background-color: #FFF;
    color:#000;
}
#nav .DisabledTab {
    color:#ccc;
}
/*no need to change these hover classes unless you need more than 4 levels */
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul,
#nav li.iehover ul ul ul ul{
  left: -999em;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.iehover ul,
#nav li li.iehover ul,
#nav li li li.iehover ul {
    left: auto;
}


#navContainerBorder {
    background-color:white;
    padding:2px;
    border:1px solid #333;
    height:30em;
}
#navContainer {
   border:1px solid #333;
   background-color: #ffffff;
   height:30em;
   width:12em;
   vertical-align:top;
   padding:10px 5px 10px 5px;
}

ascx insert  entry

The -999em is for positioning the submenu off screen before the parent is hovered over.

I think the one you want is the left:auto; in the Hover class. Set it to a fixed pixel value.
#nav li li li.iehover ul {
left: 10px;
}

John,

Thanks for your help on this ...  you were correct

left:auto; in the Hover class.was taken out and Left: 10px;  was put in. 

Perfect ... now I will be able to adjust the submenu location.

Regards,

Chris