基本的侧面菜单脚本帮助需要

Question

链接编辑子菜单。

我需要大约300px的主菜单，以及150px的子菜单。目前主菜单和子菜单宽度相同。我不能做这件事。有人能帮忙吗?

我也在这里粘贴代码。HTML:

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS:

/* Some stylesheet reset */
#cssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}
/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 150px;
}
    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 150px;   
    }
        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dotted #3a3a3a;
            border-bottom: 1px dotted #1b1b1b;
            padding: 11px 20px;
            width: 110px;
            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: #d8d8d8;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 1px #000;
            font-size: 13px;
            font-weight: 300;
            /* Background & effects */
            background: #282828;
        }
        /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }
        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            border-bottom: 0;
        }

        /* The hover state of the menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: #3cc4e6;
            text-shadow: 0 1px 0 #fff;
            background: #e6e6e6;
            background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
            background: -ms-linear-gradient(bottom, #e6e6e6, #fff); 
            background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
            background: -o-linear-gradient(bottom, #e6e6e6, #fff);
            border-color: transparent;
        }
        /* The arrow indicating a submenu */
        #cssmenu > ul .has-sub>a::after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;
            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #d8d8d8; 
        }
        /* The same arrow, but with a darker color, to create the shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;
            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #000;
        }
        /* Changing the color of the arrow on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid #3cc4e6;
        }
        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid #fff;
        }

        /* THE SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 150px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* The fade effect, created using an opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }
        /* Showing the submenu when the user is hovering the parent link */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }

Answer 1

修改后的CSS:

/* Some stylesheet reset */
#cssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}
/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 150px;
}
/* The list elements which contain the links */
#cssmenu > ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 300px;   
}
    /* General link styling */
    #cssmenu > ul li a {
        /* Layout */
        display: block;
        position: relative;
        margin: 0;
        border-top: 1px dotted #3a3a3a;
        border-bottom: 1px dotted #1b1b1b;
        padding: 11px 20px;
        width: 260px;
        /* Typography */
        font-family:  Helvetica, Arial, sans-serif;
        color: #d8d8d8;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 1px 1px #000;
        font-size: 13px;
        font-weight: 300;
        /* Background & effects */
        background: #282828;
    }
    /* Rounded corners for the first link of the menu/submenus */
    #cssmenu > ul li:first-child>a {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top: 0;
    }
    /* Rounded corners for the last link of the menu/submenus */
    #cssmenu > ul li:last-child>a {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: 0;
    }

    /* The hover state of the menu/submenu links */
    #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
        color: #3cc4e6;
        text-shadow: 0 1px 0 #fff;
        background: #e6e6e6;
        background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
        background: -ms-linear-gradient(bottom, #e6e6e6, #fff); 
        background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
        background: -o-linear-gradient(bottom, #e6e6e6, #fff);
        border-color: transparent;
    }
    /* The arrow indicating a submenu */
    #cssmenu > ul .has-sub>a::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 10px;
        width: 0px;
        height: 0px;
        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #d8d8d8; 
    }
    /* The same arrow, but with a darker color, to create the shadow effect */
    #cssmenu > ul .has-sub>a::before {
        content: '';
        position: absolute;
        top: 17px;
        right: 10px;
        width: 0px;
        height: 0px;
        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #000;
    }
    /* Changing the color of the arrow on hover */
    #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
        border-left: 4px solid #3cc4e6;
    }
    #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
        border-left: 4px solid #fff;
    }

    /* THE SUBMENUS */
    #cssmenu > ul ul {
        position: absolute;
        left: 300px;
        top: -9999px;
        padding-left: 5px;
        opacity: 0;
        /* The fade effect, created using an opacity transition */
        -webkit-transition: opacity .3s ease-in;
        -moz-transition: opacity .3s ease-in;
        -o-transition: opacity .3s ease-in;
        -ms-transition: opacity .3s ease-in;
    }
    #cssmenu > ul ul a {
        width:110px;
    }
    #cssmenu > ul ul ul {
        left:150px;
    }
    /* Showing the submenu when the user is hovering the parent link */
    #cssmenu > ul li:hover>ul {
        top: 0px;
        opacity: 1;
    }

Answer 2

我已经添加/更新了css

#cssmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}
/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
}
    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0; 
    }
        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dotted #3a3a3a;
            border-bottom: 1px dotted #1b1b1b;
            padding: 11px 20px;
            width: 300px;
            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: #d8d8d8;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 1px #000;
            font-size: 13px;
            font-weight: 300;
            /* Background & effects */
            background: #282828;
        }
        /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }
        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            border-bottom: 0;
        }

        /* The hover state of the menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: #3cc4e6;
            text-shadow: 0 1px 0 #fff;
            background: #e6e6e6;
            background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
            background: -ms-linear-gradient(bottom, #e6e6e6, #fff); 
            background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
            background: -o-linear-gradient(bottom, #e6e6e6, #fff);
            border-color: transparent;
        }
        /* The arrow indicating a submenu */
        #cssmenu > ul .has-sub>a::after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;
            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #d8d8d8; 
        }
        /* The same arrow, but with a darker color, to create the shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;
            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid #000;
        }
        /* Changing the color of the arrow on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid #3cc4e6;
        }
        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid #fff;
        }


        /* THE SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 340px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* The fade effect, created using an opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }
        #cssmenu > ul ul ul{
            left:190px; 
        }
        /* Showing the submenu when the user is hovering the parent link */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }
        #cssmenu > ul li ul a {
            width:150px;
        }

这是演示工作