CSS menu : Displaying third tier submenus properly with css

[thxman]

Hi All

 

I am not the best of css and html, so i hope you guys could help me with the css menu i am using :)as you can see i cant get me third submenu to show outside to the right. because i think its still connected to menulevel 1 and 2.and it need to somehow work alone with the right css commands. i think you understand what i mean

 

So here is my Code for HTML the menu

<div id="templatemo_menu_wrapper">

<div class="container">

<ul id="nav">

<li><a href="javascript: document.location='index.html?state=' + getTrackingCode( );">Home</a></li>

<li><a href="../download.html?state=0">Download</a></li>

<li><a class="hsubs" >Gallery</a>

<ul class="subs">

<li><a href="../gallery.html?state=0">Kristiansand (Norway)</a></li>

</ul>

</li>

<li><a >Tutorials</a>

<ul class="subs">

<li><a href="../spineditor-tutorial.html?state=0">How to use SpinEditor</a>

<ul class="subs1">

<li><a href="../spindoctor-tutorial.html?state=0">Tutorial part1</a></li>

</ul>

<li><a href="../spindoctor-tutorial.html?state=0">How to use SpinDoctor</a></li>

<li><a href="../manager-tutorial.html?state=0">How to use Manager</a></li>

</ul>

</li>

<li><a >Products</a>

<ul class="subs">

<li><a href="../spineditor.html?state=0">SpinEditor</a></li>

<li><a href="../spindoctor.html?state=0">SpinDoctor</a></li>

<li><a href="../smartinfo.html?state=0">SmartInfo LED</a></li>

<li><a href="../qrobe.html?state=0">Q-Robe TicketPrinter</a></li>

</ul>

</li>

<li><a href="../videos.html?state=0">Videos</a></li>

<li><a href="../index.html?state=0">Back</a></li>

<div id="lavalamp"></div>

</ul>

</div>

</div>And here is the css code for the menu.

.container {background: url(../images/templatemo_menu_bg1.jpg) center no-repeat;}#nav,#nav ul {        margin: 0;    padding: 0;}#nav {	    background: url('menu_bg.png') no-repeat scroll 0 0 transparent;	margin-left:auto; margin-right: auto;    clear: both;    font-size: 13px;    height: 95px;    position: relative;    width: 967px;}#nav ul {    background-color: #222;    border:1px solid #222;    border-radius: 0 5px 5px 5px;    border-width: 0 1px 1px;    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);    left: -9999px;    overflow: hidden;    position: absolute;    top: -9999px;    z-index: 2;    -moz-transform: scaleY(0);    -ms-transform: scaleY(0);    -o-transform: scaleY(0);    -webkit-transform: scaleY(0);    transform: scaleY(0);    /*-moz-transform-origin: 0 0;    -ms-transform-origin: 0 0;    -o-transform-origin: 0 0;    -webkit-transform-origin: 0 0;    transform-origin: 0 0;    -moz-transition: -moz-transform 0.1s linear;    -ms-transition: -ms-transform 0.1s linear;    -o-transition: -o-transform 0.1s linear;    -webkit-transition: -webkit-transform 0.1s linear;    transition: transform 0.1s linear;*/}#nav li {    background: url('menu_line.png') no-repeat scroll right 5px transparent;    float: left;    position: relative;}#nav li a {    color: #FFFFFF;    display: block;    float: left;    font-weight: normal;    height: 35px;    padding: 17px 20px 0;    position: relative;    text-decoration: none;    text-shadow: 1px 1px 1px #000000;}#nav li:hover > a {    color: #00B4FF;}#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {    background: none repeat scroll 0 0 #121212;    outline: 0 none;}#nav li:hover ul.subs {    left: 0;    top: 51px;    width: 200px;    -moz-transform: scaleY(1);    -ms-transform: scaleY(1);    -o-transform: scaleY(1);    -webkit-transform: scaleY(1);    transform: scaleY(1);}#nav li:hover ul.subs1 {		position: absolute;	left: 100px;	top: 0px;	width: 200px;    -moz-transform: scaleY(1);    -ms-transform: scaleY(1);    -o-transform: scaleY(1);    -webkit-transform: scaleY(1);    transform: scaleY(1);}#nav ul li {    background: none;    width: 100%;}#nav ul li a {    float: none;}#nav ul li:hover > a {    background-color: #121212;    color: #00B4FF;}#lavalamp {    background: url('lavalamp.png') no-repeat scroll 0 0 transparent;    height: 16px;    left: 7px;    position: absolute;    top: 0px;    width: 64px;    -moz-transition: all 300ms ease;    -ms-transition: all 300ms ease;    -o-transition: all 300ms ease;    -webkit-transition: all 300ms ease;    transition: all 300ms ease;}#lavalamp:hover {    -moz-transition-duration: 3000s;    -ms-transition-duration: 3000s;    -o-transition-duration: 3000s;    -webkit-transition-duration: 3000s;    transition-duration: 3000s;}#nav li:nth-of-type(1):hover ~ #lavalamp {    left: 7px;}#nav li:nth-of-type(2):hover ~ #lavalamp {    left: 95px;}#nav li:nth-of-type(3):hover ~ #lavalamp {    left: 188px;}#nav li:nth-of-type(4):hover ~ #lavalamp {    left: 281px;}#nav li:nth-of-type(5):hover ~ #lavalamp {    left: 377px;}#nav li:nth-of-type(6):hover ~ #lavalamp {    left: 464px;}#nav li:nth-of-type(7):hover ~ #lavalamp {    left: 544px;}#nav li:nth-of-type(8):hover ~ #lavalamp {    left: 620px;}

 

 

[newseed]

Look at this css:

 

#nav li:hover ul.subs1

 

From what I saw in your html, subs1 should be the third level flyout but your css above is set for second level. Try changing it to the following:

 

#nav li:hover ul.subs ul.subs1

 

So #nav is the first ul (first leve); subs is the second ul (second level) and subs1 is the third ul (third leve).

[thxman]

Hi newseed, thanks for the response

 

But if i change to #nav li:hover ul.subs ul.subs1

 

Then its still the same with my menu. should it not be like this?

#nav li:hover ul.subs {

left: 0;

top: 51px;

width: 200px;

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

#nav li:hover ul.subs ul.subs1 {

left: 0px;

top: 0px;

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

[dsonesuk]

#nav li:hover ul.subs1 will trigger when first parent li is hovered over, but you require sub1 to show only when the sub li is hovered over

 

#nav li li:hover ul.subs1

 

i don't know why you added class name to each ul? its not necessary.

 

#nav li li:hover ul

 

would suffice, it would add this specific styling to this tier level and others below it, only when you need to change styling of the tier lever below it you would use

 

#nav li li li:hover ul {} this would now add styling to the next tier below above and others below IT.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>CSS menu : Displaying third tier submenus properly with css</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            .container {                background: url(../images/templatemo_menu_bg1.jpg) center no-repeat;            }            #nav,#nav ul, #nav li {                list-style-type: none;/* added by dsonesuk*/                margin: 0;                padding: 0;            }            #nav {                background: url('menu_bg.png') no-repeat scroll 0 0 transparent;                margin-left:auto; margin-right: auto;                clear: both;                font-size: 13px;                height: 95px;                position: relative;                width: 967px;            }            #nav ul {                background-color: #222;                border:1px solid #222;                border-radius: 0 5px 5px 5px;                border-width: 0 1px 1px;                box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);                left: -9999px;                overflow: hidden;                position: absolute;                top: -9999px;                z-index: 2;                -moz-transform: scaleY(0);                -ms-transform: scaleY(0);                -o-transform: scaleY(0);                -webkit-transform: scaleY(0);                transform: scaleY(0);                /*-moz-transform-origin: 0 0;                -ms-transform-origin: 0 0;                -o-transform-origin: 0 0;                -webkit-transform-origin: 0 0;                transform-origin: 0 0;                -moz-transition: -moz-transform 0.1s linear;                -ms-transition: -ms-transform 0.1s linear;                -o-transition: -o-transform 0.1s linear;                -webkit-transition: -webkit-transform 0.1s linear;                transition: transform 0.1s linear;*/            }            #nav li {                background: url('menu_line.png') no-repeat scroll right 5px transparent;                float: left;                position: relative;            }            #nav li a {                color: #FFFFFF;                display: block;                float: left;                font-weight: normal;                height: 35px;                padding: 17px 20px 0;                position: relative;                text-decoration: none;                text-shadow: 1px 1px 1px #000000;            }            #nav li:hover > a {                color: #00B4FF;            }            #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {                background: none repeat scroll 0 0 #121212;                outline: 0 none;            }            #nav li:hover ul {                left: 0;                top: 51px;                width: 200px;            } /* added by dsonesuk*/            #nav li:hover ul.subs {                -moz-transform: scaleY(1);                -ms-transform: scaleY(1);                -o-transform: scaleY(1);                -webkit-transform: scaleY(1);                transform: scaleY(1);            }            #nav li ul {overflow:visible;}  /* added by dsonesuk*/            #nav li li:hover ul {                /*position: absolute                left: 100px;                top: 0px;                width: 200px;                removed by dsonesuk*/                left: 20px; /* amended by dsonesuk*/                -moz-transform: scaleY(1);                -ms-transform: scaleY(1);                -o-transform: scaleY(1);                -webkit-transform: scaleY(1);                transform: scaleY(1);            }            #nav ul li {                background: none;                width: 100%;            }            #nav ul li a {                float: none;            }            #nav ul li:hover > a {                background-color: #121212;                color: #00B4FF;            }            #lavalamp {                background: url('lavalamp.png') no-repeat scroll 0 0 transparent;                height: 16px;                left: 7px;                position: absolute;                top: 0px;                width: 64px;                -moz-transition: all 300ms ease;                -ms-transition: all 300ms ease;                -o-transition: all 300ms ease;                -webkit-transition: all 300ms ease;                transition: all 300ms ease;            }            #lavalamp:hover {                -moz-transition-duration: 3000s;                -ms-transition-duration: 3000s;                -o-transition-duration: 3000s;                -webkit-transition-duration: 3000s;                transition-duration: 3000s;            }            #nav li:nth-of-type(1):hover ~ #lavalamp {                left: 7px;            }            #nav li:nth-of-type(2):hover ~ #lavalamp {                left: 95px;            }            #nav li:nth-of-type(3):hover ~ #lavalamp {                left: 188px;            }            #nav li:nth-of-type(4):hover ~ #lavalamp {                left: 281px;            }            #nav li:nth-of-type(5):hover ~ #lavalamp {                left: 377px;            }            #nav li:nth-of-type(6):hover ~ #lavalamp {                left: 464px;            }            #nav li:nth-of-type(7):hover ~ #lavalamp {                left: 544px;            }            #nav li:nth-of-type(8):hover ~ #lavalamp {                left: 620px;            }        </style>    </head>    <body>        <div id="templatemo_menu_wrapper">            <div class="container">                <ul id="nav">                    <li><a href="javascript: document.location='index.html?state=' + getTrackingCode( );">Home</a></li>                    <li><a href="../download.html?state=0">Download</a></li>                    <li><a class="hsubs" >Gallery</a>                        <ul class="subs">                            <li><a href="../gallery.html?state=0">Kristiansand (Norway)</a></li>                        </ul>                    </li>                    <li><a >Tutorials</a>                        <ul class="subs">                            <li><a href="../spineditor-tutorial.html?state=0">How to use SpinEditor</a>                                <ul class="subs1">                                    <li><a href="../spindoctor-tutorial.html?state=0">Tutorial part1</a></li>                                </ul>                            <li><a href="../spindoctor-tutorial.html?state=0">How to use SpinDoctor</a></li>                            <li><a href="../manager-tutorial.html?state=0">How to use Manager</a></li>                        </ul>                    </li>                    <li><a >Products</a>                        <ul class="subs">                            <li><a href="../spineditor.html?state=0">SpinEditor</a></li>                            <li><a href="../spindoctor.html?state=0">SpinDoctor</a></li>                            <li><a href="../smartinfo.html?state=0">SmartInfo LED</a></li>                            <li><a href="../qrobe.html?state=0">Q-Robe TicketPrinter</a></li>                        </ul>                    </li>                    <li><a href="../videos.html?state=0">Videos</a></li>                    <li><a href="../index.html?state=0">Back</a></li>                    <div id="lavalamp"></div>                </ul>            </div>        </div>    </body></html>