Needing help with CSS Menu

[Jeremy M.]

Having a bit of trouble creating sub-menus with my CSS Menu. . Can anyone help?

Code Select Expand

<div class="sidebar1">
  <ul class="nav">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
      <li><a href="#">Link 7</a></li>
      <li><a href="#">Link 8</a></li>
      <li><a href="#">Link 9</a></li>
      <li><a href="#">Link 10</a></li>
      <li><a href="#">Link 11</a></li>
      <li><a href="#">Link 12</a></li>
      <li><a href="#">Link 13</a></li>
    </ul>

Code Select Expand

ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #ADB96E;
color: #FFF;
}

[Hj Ahmad Rasyid Hj Ismail]

For side menu, I will normally refer to admin side menu. But may I know what is the problem that you are actually facing?

[Jeremy M.]

For side menu, I will normally refer to admin side menu. But may I know what is the problem that you are actually facing?

I don't know what code(s) to use to be able to have sub menus.

[Hj Ahmad Rasyid Hj Ismail]

For SMF admin side menu, open your index.css and see the code under /* Styles for sidebar menus.

If you need an advanced side menu, may be you can go to CSS Menu Maker site. This one is nice though: http://cssmenumaker.com/menu/flat-flyout-menu

[Jeremy M.]

For SMF admin side menu, open your index.css and see the code under /* Styles for sidebar menus.

If you need an advanced side menu, may be you can go to CSS Menu Maker site. This one is nice though: http://cssmenumaker.com/menu/flat-flyout-menu

I'm creating a forum from scratch. . .  I just need to know what I need to input to get that code to accept sub-menus.

[Jeremy M.]

i have attached the file I am working with. If anyone can insert a css menu (where the current menu is), it would be appreciated. . . The CSS Menu will need to support menu>sub-menu>sub-sub-menu) basically the main button needs 2 sub menus.

[Justyne]

I'm creating a forum from scratch. . .  I just need to know what I need to input to get that code to accept sub-menus.

If this is true, how can this be a 2.0 question?

I am quite confused reading this. Where are you trying to ad this submenu?

[Jeremy M.]

I'm creating a forum from scratch. . .  I just need to know what I need to input to get that code to accept sub-menus.

If this is true, how can this be a 2.0 question?

I am quite confused reading this. Where are you trying to ad this submenu?

under "Links"

[Hj Ahmad Rasyid Hj Ismail]

This one is nice though: http://cssmenumaker.com/menu/flat-flyout-menu

The link I gave above already have the sample you need. You just need to understand the id and class in the sample. The html structure is generally the same.

[Gwenwyfar]

If you're talking about submenus that appear on hover, submenus would be a second li inside the lis you already have. You then make them display:none as default, and call them out on :hover Everything else (positioning, etc), is just finetuning. You can keep nesting lists for as many submenus as you wish like this, but you'll need a piece of code for each one (like ul li ul li:hover, ul li ul li ul li:hover and so on)