thanks in advance,
Robert
/* =Menu
--------------------------------------------------------------*/
#main-nav {
border: 1px solid #439f55;
cursor: pointer;
background: #57ad68;
color: #fff;
position: relative;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}
#main-nav li {
float: left;
position: relative;
padding: 0;
}
#main-nav a {
color: #fff;
display: block;
float: left;
font-size: 22px;
padding: 8px 12px 0 10px;
height: 32px;
}
#main-nav a:hover,#main-nav ul li.current-menu-item a,#main-nav ul li.current_page_ancestor a,#main-nav ul li.current-menu-ancestor a,#main-nav ul li.current_page_item a,#main-nav ul li:hover > a {
background: #439f55;
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
color: #fff;
}
#main-nav ul ul {
text-shadow: none;
}
#main-nav li:hover > a,#main-nav ul ul :hover > a,#main-nav a:focus {
color: #439f55;
}
/* Dropdown */
#main-nav ul li ul,
#main-nav ul li:hover ul ul,
#main-nav ul ul li:hover ul ul,
#main-nav ul ul ul li:hover ul ul,
#main-nav ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;
}
#main-nav ul li:hover ul,
#main-nav ul ul li:hover ul,
#main-nav ul ul ul li:hover ul,
#main-nav ul ul ul ul li:hover ul,
#main-nav ul ul ul ul ul li:hover ul {
display: block;
}
#main-nav ul li ul {
position: absolute;
background-color: #fff;
border-bottom: 4px solid #439f55;
top: 40px;
left: 0px;
width: 190px;
}
#main-nav ul li ul li {
float: none;
border-bottom: 1px solid #EAEAEA;
border-left: 1px solid #EAEAEA;
border-right: 1px solid #EAEAEA;
padding: 0;
}
#main-nav ul li ul li a,
#main-nav ul li.current-menu-item ul li a,
#main-nav ul li ul li.current-menu-item a,
#main-nav ul li.current_page_ancestor ul li a,
#main-nav ul li.current-menu-ancestor ul li a,
#main-nav ul li.current_page_item ul li a {
float: none;
line-height: 21px;
font-size: 13px;
font-weight: normal;
height: 100%;
padding: 6px 10px;
color: #777;
text-transform: capitalize;
background: #fff;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#main-nav ul li.current_page_item ul li a {
background: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
#main-nav ul li.current_page_item a {
border: none;
}
#main-nav ul li ul li a:hover,#main-nav ul li ul li:hover > a,#main-nav ul li.current-menu-item ul li a:hover {
background-color: #F9F9F9;
-webkit-box-shadow: none;
box-shadow: none;
color: #439f55;
}
#main-nav ul li ul li ul {
left: 188px;
top: 0px;
}
#main-nav select {
display: none;
}
.default-menu {
display: none;
}
/* =Featured Slider
--------------------------------------------------------------*/
]]>How (or) can I adjust the menus so that when you have a drop down off of a drop down it pushes further out to the right of the original drop down? These are right on top of each other as they cascade down.
Thanks.
]]>What I am looking for is a series of drop-down menus that are populated based on the contents of the previous menu.
A good example would be Car Make, Car Model, Car Colour etc… with the selection of the first resulting in the narrowing of options in the 2nd… etc.
Can anyone point me in the right direction?
]]>If you visit https://whatisthatallabout.com/ you’ll see that there’s a social networking category, with a sub-category named Twitter. I’m aiming to have the sub-categories hidden, but visible when the user hovers the mouse over the category. What’s the easiest way to do that?
Thanks!
]]>I have alot of subjects on my website. So I use the cascading menu for all my pages. But now there is a problem with the drop-down menu system. When I hover over any of my tabs with my mouse. The cascade menu drops-down and over-laps other tab on the page. So your left unable to read the tab(s) (page title(s) or click on the page(s) link. I would be grateful for any step by step guidance.
I am using “evolve 3.1”
Thank you
]]>