Jump to content

navigation menu css help


briben1976
 Share

Recommended Posts

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.
Link to comment
Share on other sites

  • 2 weeks later...

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...