menu and sub menus

Discussion in 'HTML & Website Design' started by rjhe22, Oct 22, 2012.

  1. #1
    hi
    try do put a menu and sub menu on my website.
    have no problems with the menu have the working here is the html
    
    
    [LIST]
    [*][COLOR=black][COLOR=black]<!-- Menu -->  [/COLOR][/COLOR] 
    [*][COLOR=black]    <div id=[COLOR=blue]"menu-box"[/COLOR][COLOR=black] class=[/COLOR][COLOR=blue]"cleaning-box"[/COLOR][COLOR=black]>  [/COLOR][/COLOR] 
    [*][COLOR=black]    <a href=[COLOR=blue]"#skip-menu"[/COLOR][COLOR=black] class=[/COLOR][COLOR=blue]"hidden"[/COLOR][COLOR=black]>Skip menu</a>  [/COLOR][/COLOR] 
    [*][COLOR=black]        <ul id=[COLOR=blue]"menu"[/COLOR][COLOR=black]>  [/COLOR][/COLOR] 
    [*][COLOR=black]            <li><asp:LinkButton ID=[COLOR=blue]"LkbtnHome"[/COLOR][COLOR=black] runat=[/COLOR][COLOR=blue]"server"[/COLOR][COLOR=black] Text = [/COLOR][COLOR=blue]"Home"[/COLOR][COLOR=black] CssClass=[/COLOR][COLOR=blue]"active"[/COLOR][/COLOR] 
    [*][COLOR=black]                    onclick=[COLOR=blue]"LkbtnHome_Click"[/COLOR][COLOR=black] /></li>  [/COLOR][/COLOR] 
    [*][COLOR=black]            <li><asp:LinkButton ID=[COLOR=blue]"LkbtnClubNews"[/COLOR][COLOR=black] runat=[/COLOR][COLOR=blue]"server"[/COLOR][COLOR=black] Text = [/COLOR][COLOR=blue]"Club News"[/COLOR][/COLOR] 
    [*][COLOR=black]                    onclick=[COLOR=blue]"LkbtnClubNews_Click"[/COLOR][COLOR=black] />  [/COLOR][/COLOR] 
    [*][COLOR=black]                    </li>  [/COLOR] 
    [*][COLOR=black]            <li><asp:LinkButton ID=[COLOR=blue]"LkbtnFixtures"[/COLOR][COLOR=black] runat=[/COLOR][COLOR=blue]"server"[/COLOR][COLOR=black] Text = [/COLOR][COLOR=blue]"Fixtures"[/COLOR][/COLOR] 
    [*][COLOR=black]                    onclick=[COLOR=blue]"LkbtnFixtures_Click"[/COLOR][COLOR=black] /></li>  [/COLOR][/COLOR] 
    [*][COLOR=black]            <li><asp:LinkButton ID=[COLOR=blue]"LkbtnServices"[/COLOR][COLOR=black] runat=[/COLOR][COLOR=blue]"server"[/COLOR][COLOR=black] Text = [/COLOR][COLOR=blue]"Services"[/COLOR][/COLOR] 
    [*][COLOR=black]                    onclick=[COLOR=blue]"LkbtnServices_Click"[/COLOR][COLOR=black] /></li>  [/COLOR][/COLOR] 
    [*][COLOR=black]            <li><asp:LinkButton ID=[COLOR=blue]"LkbtnGallery"[/COLOR][COLOR=black] runat=[/COLOR][COLOR=blue]"server"[/COLOR][COLOR=black] Text = [/COLOR][COLOR=blue]"Gallery"[/COLOR][/COLOR] 
    [*][COLOR=black]                    onclick=[COLOR=blue]"LkbtnGallery_Click"[/COLOR][COLOR=black] /></li>  [/COLOR][/COLOR] 
    [*][COLOR=black]            <li><asp:LinkButton ID=[COLOR=blue]"LKbtnContact"[/COLOR][COLOR=black] runat=[/COLOR][COLOR=blue]"server"[/COLOR][COLOR=black] Text = [/COLOR][COLOR=blue]"Contact Us"[/COLOR][/COLOR] 
    [*][COLOR=black]                    onclick=[COLOR=blue]"LKbtnContact_Click"[/COLOR][COLOR=black] /></li>  [/COLOR][/COLOR] 
    [*][COLOR=black]        </ul>  [/COLOR] 
    [*][COLOR=black]    </div>  [/COLOR] 
    [*][COLOR=black]    <!-- Menu end -->  [/COLOR] 
    [/LIST]
    
    Code (markup):

    and the css
    [COLOR=#333333][FONT=Consolas]
    
    
    [LIST]
    [*][COLOR=black][COLOR=black]/* Menu */  [/COLOR][/COLOR] 
    [*][COLOR=black][COLOR=gray]#menu-box {[/COLOR][/COLOR] 
    [*][COLOR=black]background: #323232 url([COLOR=#008200]'../images/menu-bg.gif') repeat-x 0 0;[/COLOR][/COLOR] 
    [*][COLOR=black]border-bottom: 1px solid #3B3B3B;  [/COLOR] 
    [*][COLOR=black]}  [/COLOR] 
    [*][COLOR=black][COLOR=gray]#menu {[/COLOR][/COLOR] 
    [*][COLOR=black]width: 900px;  [/COLOR] 
    [*][COLOR=black]margin: 0 auto;  [/COLOR] 
    [*][COLOR=black]background: #323232 url([COLOR=#008200]'../images/menu-bg.gif') repeat-x 0 0;[/COLOR][/COLOR] 
    [*][COLOR=black]}  [/COLOR] 
    [*][COLOR=black][COLOR=gray]#menu li {[/COLOR][/COLOR] 
    [*][COLOR=black]display: inline;  [/COLOR] 
    [*][COLOR=black]list-style-type: none;  [/COLOR] 
    [*][COLOR=black]text-align: center;  [/COLOR] 
    [*][COLOR=black]}  [/COLOR] 
    [*][COLOR=black][COLOR=gray]#menu li a {[/COLOR][/COLOR] 
    [*][COLOR=black]font-size: 1.1em;  [/COLOR] 
    [*][COLOR=black]color: #FFFFFF;  [/COLOR] 
    [*][COLOR=black]font-weight: bold;  [/COLOR] 
    [*][COLOR=black]float: left;  [/COLOR] 
    [*][COLOR=black]display: block;  [/COLOR] 
    [*][COLOR=black]padding: 0 1.6em;  [/COLOR] 
    [*][COLOR=black]line-height: 35px;  [/COLOR] 
    [*][COLOR=black]background: url([COLOR=#008200]'../images/li-border.gif') no-repeat 100% center;[/COLOR][/COLOR] 
    [*][COLOR=black]}  [/COLOR] 
    [*][COLOR=black][COLOR=gray]#menu li a:hover, #menu li a.active {[/COLOR][/COLOR] 
    [*][COLOR=black]font-weight: bold;  [/COLOR] 
    [*][COLOR=black]color: #FFCB5C;  [/COLOR] 
    [*][COLOR=black]}  [/COLOR] 
    [*][COLOR=black][COLOR=gray]#menu li asp:LinkButton:hover, #menu li asp:LinkButton.active[/COLOR][/COLOR] 
    [*][COLOR=black]{  [/COLOR] 
    [*][COLOR=black]font-weight: bold;  [/COLOR] 
    [*][COLOR=black]color: #FFCB5C;  [/COLOR] 
    [*][COLOR=black]    }  [/COLOR] 
    [/LIST]
    [/FONT][/COLOR]
    Code (markup):
    what im having problems with is the sub menu has anyone any ideas how to do this

     
    rjhe22, Oct 22, 2012 IP