Help with navigation

[globalnerds]

Trying to configure the third level navigation and it is looking right. The menu items at the third level are flying out vertical instead of horizontal. CSS is below. Website is natashacopelinrn.com. Take a look at the sub menus under cosmetic services.

Any help would be greatly appreciated.

Thanks

.primary-nav {
    clear: both;
    height: 56px;
    margin: 0;
    padding-top:15px;
    width: 1000px;
    font-family: 'Josefin Sans', sans-serif;
    background: linear-gradient(#cec0a3, #cec0a3) repeat scroll 0 0 transparent;    
}
.nav {
    list-style: none outside none;
    margin: 0;
    padding-left:15px;
}
.nav li {
    float: left;
    margin: 0 18px 0 -14px;
    padding: 0 0 10px;
    position: relative;
}
.nav a {
    color: black;
    float: left;
    font-size: 1.2em;
    height: 25px;
    padding: 5px 23px;
    text-decoration: none;
}
.nav li.first {
    margin-left: -15px;
}
.nav li:hover > a {
    color: #5a715d;
}
.nav li:hover > ul {
    display: block;
}
.nav ul {
    background: none repeat scroll 0 0 #5d7662;
    border-radius: 5px 5px 5px 5px;
    display: none;
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 35px;
    z-index: 99999;
}
.nav ul li {
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
}
.nav ul li:last-child {
    box-shadow: none;
}
.nav ul a {
    display: block;
    float: none;
    font-size: 1em;
    height: auto;
    line-height: 1;
    padding: 12px;
    text-transform: none;
    white-space: nowrap;
}
:first-child + html .nav ul a {
    height: 10px;
    width: 150px;
}
.nav ul a:hover {
    background: linear-gradient(#58705b, #4b5e4d) repeat scroll 0 0 transparent;
    color: #b4b3a4;
    border-radius: 5px 5px 5px 5px;
}
.nav ul li:first-child a {
    border-radius: 5px 5px 0 0;
}
.nav ul li:first-child a:after {
    border-bottom: 8px solid #5d7662;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: "";
    height: 0;
    left: 30px;
    position: absolute;
    top: -8px;
    width: 0;
}
.nav ul li:first-child a:hover:after {
    border-bottom-color: #3d4f42;
}
.ie8 .nav ul li:first-child a:after, .ie9 .nav ul li:first-child a:after {
    border-bottom: 8px solid #5d7662;
}
.ie8 .nav ul li:first-child a:hover:after, .ie9 .nav ul li:first-child a:hover:after {
    border-bottom-color: #ffac9f;
}
.nav ul li:last-child a {
    border-radius: 0 0 5px 5px;
}
.nav:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
* html .nav {
}
:first-child + html .nav {
}

.nav > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#5d7662;
}
.nav  > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
.nav > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
.nav  > li > ul > li ul > li:hover > span{
    color:#fff;
}`

[Paulie_D]

Perhaps a Codepen example instead of a code dump?

[globalnerds]

I’ve never used codepen. I just looked at it, it is looking for html code, my code is in php.

[Paulie_D]

I’ve never used codepen. I just looked at it, it is looking for html code, my code is in php.

Then just copy the HTML that is output by the PHP and use that.

[Atelierbram]

@globalnerds

PHP spits out HTML. When you do ‘view source’, in the browser, copy, and then paste in CodePen, will do the trick.

@Paulie_D You beat me on one minute ;)

[Paulie_D]

Offhand, I suspect you are not being specific enough in your selectors for each level

EG

.nav ul {
    background: none repeat scroll 0 0 #5d7662;
    border-radius: 5px 5px 5px 5px;
    display: none;
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 35px;
    z-index: 99999;
}

This targets ALL of your lists, top level or sublevel.

[globalnerds]

Here is a link to the codepen output via github

https://gist.github.com/anonymous/9229344

[Paulie_D]

Can you not post the HTML into Codepen?

[dazzle89]

Hello,

when i open your site and hover “Men’s services”, the subnavigation flies out right to it and not vertical. It looks like it works. Did I understand anything wrong?

[globalnerds]

I was able to fix this. Thanks for all of the input.

[Author]

Posts