6 Replies Latest reply: Sep 23, 2012 5:29 PM by M. Henriksen RSS

    Dynamic menu and css

    M. Henriksen Community Member

      I have made some changes to a pre-made template, but I'm having some problems with the menu.

       

      The existing menu is css (html only), horisontal, i 2 levels. Level 2 is vertical.

      But my client vants 3 levels.

      And I just can't get it to work properly.

      When a menu-item in the 3. level has been selected, it changes place when hovering the menu once more.

       

      I wold like for the menu items in level 3 to be visible when active (when hovering the menu), and stay in it's place, to the right of it's parent menu-item in level 2.

       

      I've tried so many different thing, but I just can't figure it out.

       

      I've also tried to set the menu over again, in another way that I know will work the way it's supposed to.

      But then I can't get it to be a "dynamic menu" in BC

      Can anybody help me?

       

      And here's the css:

       

       

      /* Main Navigation

      ------------------------------------------------------------------------------------------ ----------*/

      #nav {

       

       

          clear:both;

                display:inline;

                float: left;

                width:100%;

                margin:14px 0 0 10px;

                background:transparent url(images/nav-bg3.png) repeat-x left top;

      }

      #nav ul {

                background: url(images/topNavDivider.png) no-repeat scroll right top;

                display:inline-block;

                margin:0px;

                padding: 0;

      }

      #nav ul li, #nav ul li.selected {

                background: url(images/topNavDivider.png) no-repeat scroll 0 0;

                display:inline;

                float: left;

                margin: 0;

                padding:0 0px 0 0;

                position:relative;

        

      }

      #nav ul li a {

                color: #fff;

                display: block;

                font-size:12px;

                padding: 18px 10px 24px;

                text-decoration: none;

        

      }

      #nav ul li a:active, #nav ul li a:hover, #nav ul li.selected a {

                background:transparent url(images/nav-active-bg3.png) repeat-x left top;

                color: #fff;

      }

      #nav ul li ul {

                background:url(images/subnav-bg2.png);

                left: -999em;

                position: absolute;

                width: 14.5em;

                z-index:999;

                top:43px;

                box-shadow:0 1px 4px #3A3A3A;

         

      }

      #nav ul li:hover ul, #nav li.sfhover ul {

                left: auto;

      }

      #nav ul li ul li {

                border-bottom:1px solid #a4bed1;

                display:block;

                float:none;

          clear:left;

      }

      #nav ul li ul li.selected {

                float:none;

       

       

                          }

      #nav ul li.selected ul li a:link,  #nav ul li.selected ul li a:visited {

                background:none;

      }

      #nav ul li.selected ul li a:active,  #nav ul li.selected ul li a:hover {

                background:url(images/subnav-active-bg2.png);

                color: #f9f9f9;

      }

      #nav ul li ul li.selected a:link,  #nav ul li ul li.selected a:visited {

                background:url(images/subnav-active-bg2.png);

                color:#f9f9f9;

      }

      #nav ul li ul li a:link,  #nav ul li ul li a:visited {

                color: #fff;

                display: block;

                font-size: 11px;

                padding: 12px 10px;

                text-decoration: none;

      }

      #nav ul li ul li a:hover,  #nav ul li ul li a:active {

                background:url(images/subnav-active-bg2.png);

                color: #f9f9f9;

         

         

      }

       

       

      /* nav level 3

      ------------------------------------------------------------------------------------------ ----------*/

      #nav ul li ul li ul {

                background:url(images/subnav-bg2.png);

                margin-left: 100%;

                display:none;

                   list-style:none;

          position: absolute;

                width: 14.5em;

                z-index:999;

                top:0px;

                box-shadow:0 1px 4px #3A3A3A;

       

      }

       

       

      #nav ul li ul li:hover ul, #nav ul li ul.sfhover li {

                display:block;

         

      }

       

       

       

      #nav ul li ul li ul li.selected {

                float:right;

                display:block;

       

       

      }

       

       

       

       

      #nav ul li ul li ul li a:link,  #nav ul li ul li ul li a:visited {

                background:url(images/subnav-bg2.png);

                 color: #fff;

       

       

       

       

      }

      #nav ul li ul li ul li:hover a, #nav ul li ul li ul li a:hover, #nav ul li ul li ul li a:active {

                background:url(images/subnav-active-bg2.png);

                color: #f9f9f9;

       

       

      }