navigation menu css help

[briben1976]

I am trying to get my navigation menu to show up in 2 columns for the sub menu since it is a long list but havent been successful yet. Here is the css script:

 

.navigation {

position: relative;

top: 30px;

clear: both;

margin: 0 -10px 0;

padding: 0 10px;

border-width: 1px;

border-style: solid;

border-color: #343131;

}

.ie9 .navigation,

.not-ie .navigation {z-index: 30;}

.navigation {

background: #f7f5ed; /* Old browsers */

background: -moz-linear-gradient(top, #f7f5ed 0%, #ebe9e2 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5ed), color-stop(100%,#ebe9e2)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* IE10+ */

background: linear-gradient(to bottom, #f7f5ed 0%,#ebe9e2 100%); /* W3C */

}

.navigation {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-box-shadow: 0 0 3px rgba(0,0,0,.05);

-moz-box-shadow: 0 0 3px rgba(0,0,0,.05);

box-shadow: 0 0 3px rgba(0,0,0,.05);

zoom: 1;

}

.ie7 .navigation,

.ie8 .navigation {

behavior: url(../js/PIE.htc);

box-shadow: 0 0 3px rgba(0,0,0,.02);

}

.navigation > ul > li {

position: relative;

float: left;

margin: 0;

list-style: none;

}

.ie7 .navigation > ul > li {

height: 60px;

}

.navigation > ul > li > a {

position: relative;

display: block;

padding: 18px 22px;

text-align: center;

color: #2706FD;

font-weight: 600;

font-size: 14px;

font-family: 'Open Sans', Arial;

text-transform: uppercase;

}

/* Dropdown */

.navigation ul ul {

position: absolute;

left: 0;

z-index: 9;

display: none;

margin-top: -5px;

padding-top: 5px;

width: 180px;

background-color: #f7f5ed;

}

.not-ie .navigation ul ul {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.navigation > ul ul:after {

position: absolute;

top: -8px;

left: 25px;

width: 13px;

height: 8px;

background-image: url(../images/icons/sup-arrow.png);

background-repeat: no-repeat;

content: "";

}

.navigation ul ul {

-webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);

-moz-box-shadow: 0 0 4px rgba(0,0,0,.2);

box-shadow: 0 0 4px rgba(0,0,0,.2);

}

.ie8 .navigation ul ul {

behavior: url(../js/PIE.htc);

box-shadow: 0 0 4px rgba(0,0,0,.1);

}

.navigation ul ul li {position: relative;}

.navigation ul ul a {

display: block;

padding: 7px 20px;

border-width: 0 0 1px 0;

border-style: solid;

border-bottom-color: #e4e3db;

text-align: left;

color: #FF0000;

font-weight: 600;

font-size: 13px;

font-family: 'Open Sans', Arial;

}

.not-ie .navigation ul ul a {

background: -moz-linear-gradient(top, #f7f5ee 0%, #eeece4 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5ee), color-stop(100%,#eeece4)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* IE10+ */

background: linear-gradient(to bottom, #f7f5ee 0%,#eeece4 100%); /* W3C */

}

.ie8 .navigation ul ul a {background: #f7f5ee; /* Old browsers */}

.navigation ul ul li:last-child > a {

-webkit-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

.navigation > ul ul li:hover > a,

.navigation > ul ul li.current-menu-item > a,

.navigation > ul ul li.current-menu-parent > a,

.navigation > ul ul li.current-menu-ancestor > a {

background: #36332e;

color: #f2f1e9 !important;

}

.ie8 .navigation > ul ul li:hover > a,

.ie8 .navigation > ul ul li.current-menu-item > a,

.ie8 .navigation > ul ul li.current-menu-parent > a,

.ie8 .navigation > ul ul li.current-menu-ancestor > a {

background: #36332e !important;

color: #f2f1e9;

}

.navigation ul ul li .rightarrowclass {

position: absolute;

top: 50%;

right: 10px;

margin-top: -5px;

width: 7px;

height: 10px;

background-image: url(../images/icons/rightarrowclass.png);

background-repeat: no-repeat;

}

.navigation > ul ul li:hover .rightarrowclass,

.navigation > ul ul li.current-menu-item .rightarrowclass,

.navigation > ul ul li.current-menu-parent .rightarrowclass,

.navigation > ul ul li.current-menu-ancestor .rightarrowclass {background-position: bottom;}

/* Sub Dropdown */

.navigation ul ul ul {

top: 0 !important;

left: 175px;

}

.navigation ul ul ul:after {display: none;}

.not-ie .navigation ul ul ul {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

/* Nav Responsive */

.navigation .nav-responsive {

display: none;

margin: 15px 0;

padding: 4px 8px;

width: 100%;

border-color: #fff;

background-color: #fff;

background-image: url(../images/nav-bg.png);

background-position: right center;

background-repeat: no-repeat;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Thank you in advance for the help.

[passionassasin]

Hello

I threw this together real fast. It's not complete by any means but I believe it's enough to give you the general idea. Hope it helps!

 

 

CSS....

 

<style>

body{background-size: 100%;background: #e8e8e8;padding: 0;margin: 0;border: 0;}ul{clear: *;}ul{list-style: none;}ul:nth-child(2){float: left;display: block;padding: 10px;height: 100px;width: 300px;background: #e8e8e8;border: 2px solid #000;margin: 15px 0 0 -50px;}ul li{float: left;display: inline;padding: 6px;height: 20px;width: 120px;background: #333;color: #fff;}Ul li li:nth-child(1),ul li li:nth-child(2),ul li li:nth-child(3),ul li li:nth-child(4),ul li li:nth-child(5){background: none;}</style>

HTML ....

 

<body><ul> <li><a href="#">1.1lev</a></li> <li><a href=#>1.1lev</a></li> <li><a href="#">1.1Drop</a> <ul> <li><a href="#">1.1child</a></li> <li><a href="#">2.1Child</a></li> <li><a href="#">3.1Child</a></li> <li><a href="#">4.1Child</a></li> <li><a href="#">5.1nested</a></li> </li> </ul> </ul>

</body>

</html>

[passionassasin]

I'm sorry I should toss in a little description. Ive been running back and forth at home like a chicken with no head!

 

I dont understand fully what youre goal with this menu is beyond two columns. Seems like a good bit of redundant code in there though. if you just want a simple drop down menu with the links riding in two columns then this will do it. I checked both IE newest and with Firefox. I make menus all the time and in alot of them I like to display large areas in my drop downs with images and such. As I said this isnt done and of course Ive left out all the browser support and such that you included as well as the IE hacks but all said and done I'm sure this will do it for you

[passionassasin]

Back again LOL. Tip: Dont use "display: none" instead use "margin-left: 999em;" makes it more accessable that way. But your call.

 

Oh and the "color: #fff" ? umm yeah doesn't work because it's not refering to 'a'. Thats me still running around with no head!