# Pop-out vertical menu help!!!



## asdsdf (Apr 13, 2008)

Hi,

For my website, I'm trying to make it so that the sub-menus pop-out, instead of just taking up room. However, html I'm okay, but with CSS, I'm totally lost. If someone knows how to do so, please explain in nub(Which I am) terms. The current html for my menu is :

&lt;div id="leftside"&gt;

&lt;h2 class="hide"&gt;Menu:&lt;/h2&gt;

&lt;ul class="avmenu"&gt;

&lt;li&gt;&lt;a class="current" href="http://www.mantishaven.com/"&gt;Home&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="http://mantishaven.com/store/index.html"&gt;Store&lt;/a&gt;&lt;/li&gt;

&lt;ul&gt;

&lt;li&gt;&lt;a href="http://mantishaven.com/store/mantises.html"&gt;Mantises&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="http://mantishaven.com/store/ootheca.html"&gt;Ootheca&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="http://mantishaven.com/store/supplies.html"&gt;Supplies&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/li&gt;

&lt;li&gt;&lt;a href="http://shopsite.startlogic.com/ss8.3/sc/order.cgi?storeid=*22b877cacc5e3256d178000574b7842d4e4cfb&amp;function=show"&gt;Shopping Cart&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="caresheets.html"&gt;Caresheets&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="logs.html"&gt;Mantis Logs&lt;/a&gt;&lt;/li&gt;

&lt;ul&gt;

&lt;li&gt;&lt;a href="polog.html"&gt;Pseudocreobotra ocellata&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="dllog.html"&gt;Deroplatys lobata&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="bmlog.html"&gt;Blepharopsis mendica &lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/li&gt;

&lt;li&gt;&lt;a href="shipping.html"&gt;Shipping Terms/Conditions&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="mailto:[email protected]?subject=Inquiry"&gt;

Contact Us&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

How can I change it so that it pop-outs instead? ( I highlighted the places in red.) What changes do I have to make? CSS files? Thanks a lot!

(700th post...Not much compared to some of you guys, but it's a lot for me! Look, I even became the coolest member!!!)


----------



## Ian (Apr 13, 2008)

Considering you're now officially so cool Jasper, try this:



```
&lt;style type="text/css"&gt;

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
    
.suckerdiv ul li{
position: relative;
}
    
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

    
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

&lt;/style&gt;

&lt;script type="text/javascript"&gt;



var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i&lt;menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t&lt;ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
        if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
        else //else if this is a sub level submenu (ul)
          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
        for (var t=ultags.length-1; t&gt;-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
        ultags[t].style.visibility="visible"
        ultags[t].style.display="none"
        }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

&lt;/script&gt;
&lt;div class="suckerdiv"&gt;
&lt;ul id="suckertree1"&gt;
&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Store&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Mantids&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Ootheca&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Supplies&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shopping cart&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Caresheets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Mantis logs&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pseudocreobotra ocellata&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Deroplatys lobata&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Blepharopsis mendica &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shipping/terms and conditions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
```
Obviously change the style sheet to match your current styles, and change the div ID's to match what the javascript function is calling for in each instance.


----------



## asdsdf (Apr 13, 2008)

Wow, thanks a lot for the code. Problem is, how DO I change the style sheet to match your current styles, and change the div ID's to match what the javascript function is calling for in each instance. I pasted the code you gave into the /***** Main menu *****/ part of the orignal css file, and replaced my html(menu part) with:



```
&lt;div class="suckerdiv"&gt;
&lt;ul id="suckertree1"&gt;
&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Store&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Mantids&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Ootheca&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Supplies&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shopping cart&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Caresheets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Mantis logs&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pseudocreobotra ocellata&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Deroplatys lobata&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Blepharopsis mendica &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shipping/terms and conditions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
```
With this, it SHOULD work, and it does....in a way. When I put my mouse over it, it becomes yellow, as the code says it would. However, there is no pop-out menu. my html code for the menu is now:



```
[color="#FF0000"]&lt;div id="leftside"&gt;
&lt;h2 class="hide"&gt;Menu:&lt;/h2&gt;[/color]

&lt;div class="suckerdiv"&gt;
&lt;ul id="suckertree1"&gt;
&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Store&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Mantids&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Ootheca&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Supplies&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shopping cart&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Caresheets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Mantis logs&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pseudocreobotra ocellata&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Deroplatys lobata&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Blepharopsis mendica &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shipping/terms and conditions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
```
The



```
&lt;div id="leftside"&gt; &lt;h2 class="hide"&gt;Menu:&lt;/h2&gt;
```
(in red) part of the html, is from the



```
/***** Left sidebar *****/

#leftside {
clear:left;
float:left;
width:140px;
margin:0 0 5px;
padding:0;
}

#leftside h2,#leftside h3 {
color:#505050;
background-color:inherit;
font-size:1.3em;
margin:0 0 5px;
padding:0;
}

#leftside div.announce {
clear:left;
margin:10px 0 15px;
padding:7px 5px;
width:126px;
font-size:0.9em;
background-color:#f4f4f4;
color:#505050;
border-left:4px solid #cccccc;
line-height:1.5em;
}

#leftside div.announce p {
margin:10px 0 0;
padding:0;
}
```
(Part of my original css. It makes the menu stay at the side, etc. I have to keep this, or else the sidebar goes wacko.) Is this affecting it? I have no idea what is wrong...Please help. Thanks.


----------



## Ian (Apr 13, 2008)

You have included the javascript code in your HTML, right? It's this that calls for the menu popout.


----------



## asdsdf (Apr 13, 2008)

Holy moly. Thanks a lot. I do not need to leave it inside of the CSS document right? You deserve to be the "Almost Coolest Member"  

Stay tuned, jic i have trouble editing it.


----------



## asdsdf (Apr 13, 2008)

```
&lt;style type="text/css"&gt;

.suckerdiv ul{
width:140px;
margin:0 0 18px;
padding:0;
list-style:none;
}
    
.suckerdiv ul li{
width:140px;
padding:0;
line-height:1.4em;
display:inline;
}

/*Sub level menu items */    
.suckerdiv ul li ul{
background-color:#f4f4f4;
color:#505050;
font-weight:bold;
width:130px;
float:left;
margin-bottom:5px;
padding:5px 1px 5px 5px;
border-left:4px solid #cccccc;
text-decoration:none;
}

/* Sub level menu links style */
.suckerdiv ul li a:hover,.suckerdiv ul li a.current {
background-color:#eaeaea;
border-left:4px solid #286ea0;
color:#505050;
}

.suckerdiv ul ul{
margin:0 0 0 15px;
padding:0 0 5px 0;
font-size:0.9em;
width:125px;
}

.suckerdiv ul ul a{
padding:3px 1px 3px 5px;
font-weight:normal;
width:115px;
}

.suckerdiv ul ul{
width:113px;
}

.suckerdiv ul ul ul a{
width:100px;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: #eaeaea;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

    
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

&lt;/style&gt;

&lt;script type="text/javascript"&gt;



var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i&lt;menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t&lt;ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
        if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
        else //else if this is a sub level submenu (ul)
          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
        for (var t=ultags.length-1; t&gt;-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
        ultags[t].style.visibility="visible"
        ultags[t].style.display="none"
        }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

&lt;/script&gt;
&lt;div class="suckerdiv"&gt;
&lt;ul id="suckertree1"&gt;
&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Store&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Mantids&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Ootheca&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Supplies&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shopping cart&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Caresheets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Mantis logs&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Pseudocreobotra ocellata&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Deroplatys lobata&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Blepharopsis mendica &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Shipping/terms and conditions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
```
This is currently the code, and I have been editing around with it. It looks like the original, except when i hover my mouse of it, it pops out. (drops down now o.o) But then I can't click on it, because once I do, the pop-out thing closes. What's wrong with my code? I don't mind it popping out downwards, and it even seems better, but what do I have to do so that it stays without closing when I place my mouse over it? Perhaps I should delay it or something? What would be the code for it? Or what do I have to edit? (for example, like this page! http://www.udm4.com/ after your mouse leaves the submenu area that pops out, the menu stays there for a while.) &gt;.&lt; Thanks a lot...


----------

