I posted this question over wordpress.stackexchange.com but they closed it and pointed me to post here.
I am not sure whether it is the right place for such question but I did not find any CSS related section here.
Please see the below image.
Currently my menus are similar to A but I want it to be like B. I also want to change the color of the separator from Black to Green in sub menu. I want this effect only on the sub menu whether sub menu page is selected or not. How can I do that?
Here is the selected code from my style.css:
.menu {
font: normal 13px Arial, sans-serif;
background: url() repeat-x 0 -80px;
width: 100%;
height: 35px;
position: relative; /* Required for positioning of sub-menus */
}
.menu li ul {
display: none; /* Required to hide menu when inactive */
position: absolute; /* Position the menu below and to the far left */
top: 50px;
left: 0;
}
/* This is the rule that displays sub-menus when a parent link is clicked */
.menu li.current-menu-parent ul, .menu li.current-menu-item ul {
display: block;
}
.menu li {
float: left;
margin: 0;
padding: 0;
font-weight: bold;
border-right:#3c3c3c solid 1px;
}
.menu li a {
float: left;
display: block;
color: #fff;
background: url() repeat-x 100% 0;
padding: 12px 25px;
text-decoration: none;
}
.menu li a:hover {
background-position: 100% -160px;
color: #fff;
}
/* Styling for current parent item */
.menu li.current-menu-item a, .menu li.current-menu-parent a{
background: url() repeat-x scroll left bottom #83C839;
}
/* Styling for sub-menus */
.menu li ul {
width: 805px;
background: url() repeat-x 0 -120px;
border: 1px solid #83C839;
border-style: none none solid;
border-width: 3px;
}
.menu li ul li {
padding: 6px 0;
}
.menu li.current-menu-item ul li a, .menu li.current-menu-parent ul li a {
background: url() repeat-y right center;
color: #666666;
padding: 12px 25px;
margin: -6px 0;
}
.menu li ul li a:hover {
color: #000;
}
/* Styling for current page sub-menu links */
.menu li.current-menu-parent ul li.current-menu-item a, .menu li.current-menu-parent ul li.current-menu-item a:hover {
background: url("") repeat-x scroll left bottom #83C839;
color: #FFFFFF;
}
I am using this code in Wordpress Theme. My code is based upon WordPress Tutorial – Current & Parent Menu Items In Custom Menus code, I modified it according to my need.
Related
I am working on an asp.net project but cannot center align the list that I have:
Css Horizontal Menu
I tried wrapping a div n then setting the css of that div to text-align:center but still the links remain to the left
This is the css of the menu:
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px solid #202020;
border-left-width: 0;
text-decoration: none;
background: url(menubg.gif) center center repeat-x;
color: black;
font: bold 13px Tahoma;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: #e3f1bd;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: url(menubgover.gif) center center repeat-x;
}
.horizontalcssmenu ul li ul li a:hover{
background: #cde686;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
The JQUERY used is as follows:
var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.
function createcssmenu2(){
for (var i=0; i<cssmenuids.length; i++){
var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML=" "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.style.zIndex=100
this.getElementsByTagName("ul")[0].style.visibility="visible"
this.getElementsByTagName("ul")[0].style.zIndex=0
}
ultags[t].parentNode.onmouseout=function(){
this.style.zIndex=0
this.getElementsByTagName("ul")[0].style.visibility="hidden"
this.getElementsByTagName("ul")[0].style.zIndex=100
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu2, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu2)
plz help I want the horizontal list positioned # the middle of the page.
Wrap a container div around the menu and set the margin: 0 auto; this should center it for you.
I have the following markup for a CSS dropdown menu:
<ul>
<li><a>FieldOne LevelOne</a></li>
<li><a>FieldTwo LevelOne</a></li>
<li><a>FieldThree LevelOne</a>
<ul>
<li><a>FieldOne LevelTwo</a>
<ul>
<li><a>FieldOne LevelThree</a></li>
<li><a>FieldTwo LevelThree</a></li>
</ul>
</li>
<li><a>FieldTwo LevelTwo</a>
<ul>
<li><a>FieldOne LevelOn</a></li>
</ul>
</li>
</ul>
</ul>
And the following CSS:
ul ul {
display: none;
}
ul li {
list-style: none;
}
ul li:hover > ul {
display: block;
}
ul
{
background: #76b800;
padding: 0 20px;
margin-left: 5px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
min-width: 140px;
text-align: center;
vertical-align: bottom;
}
ul li:hover {
background-color: #4478B7;
}
ul li a
{
display: block;
padding: 10px 40px 10px 40px;
color: #fff;
text-decoration: none;
font-size: 18px;
}
ul ul {
background: #4478B7;
padding: 0;
position: absolute;
top: 100%;
z-index: 5;
margin: 0;
}
ul ul li
{
float: none;
border-top: 1px solid;
border-bottom: 1px solid;
position: relative;
border-style: solid;
border-width: 1px;
border-color: #88AAD2 white #335B8C white;
}
ul ul li:hover
{
background-color: #396599;
background-image: none;
}
ul ul li a {
color: #fff;
min-width: 140px !important;
padding: 10px 40px 10px 40px !important;
font-size: 16px !important;
}
ul ul li a:hover {
background: #233F61;
}
ul ul ul {
position: absolute;
left: 100%;
top:0;
}
The problem: When you go to the second level and you hover over a LI, the third level list appears. If you go from one LI to another in the second level, the third level list nested inside the first LI disappears and the one nested inside the second appears (if it has one).
BUT
If instead you leave the second-level list altogether without making the third-level menu disappear by navigating inside the second-level menu, once you re-list the second-level menu the third-level one that was last showed appears there next to its LI, but without content (no text from As). The lists appear with the style as though as they weren't being hovered.
You can check the effect here: http://jsfiddle.net/JE8ZM/. If you run it on IE9 or Chrome, it works. But if you run it on IE7, try going to FieldOne LevelTwo, hover over it and then leave on its left, without entering the third-level menu that showed up. Then hover over FieldThree LevelOne and see what I mean.
Thanks.
Nested sub nav menus are notoriously difficult to get working cross browser without the aid of Javascript or jQuery. Here is the best 'pure CSS' resource I know of which will solve your problem!
http://www.cssplay.co.uk/menus/final_drop2.html
I have used the wordpress twenty eleven theme for my website. Now i want to crate a dropdown menu for my site. By default wordpress have the dropdown menu facility. Now when i hover on the main menu i got the sub-menu part. For example :-
I have a main menu like :-
Home | About | Contact
When i hover on the about menu it show the sub menus of "about" menu like
Home | About | Contact
Our Services
History
Our Staff
when i hover on the history menu it display the sub menu of History Menu like bellow:-
Home | About | Contact
Our Services
History
History 1
History 2
History 3
Our Staff
but i want to display the submenu of History, when i hover on About menu. If i hover on the About menu it should display like bellow :-
Home | About | Contact
Our Services
History
History 1
History 2
History 3
Our Staff
Please help me to get the output in the wordpress menu.
#access {
background: #00ADEE; /* Show a solid color for older browsers */
clear: both;
display: block;
width: 915px;
}
#access ul {
font-size: 11px;
list-style: none;
margin: 0;
padding: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 12px;
padding: 4px 9px;
text-decoration: none;
background: url(images/menu-border.png);
background-position: right 6px;
background-repeat: no-repeat;
text-transform: lowercase;
}
#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
left: 11px;
width: 252px;
z-index: 99999;
background: #FFFFFF;
padding: 0 4px;
border: 1px solid #00AEEF;
}
#access ul ul li {
}
#access ul ul ul {
left: 23%;
top: 0;
border: none;
width: 150px;
}
#access ul ul ul li{
border: none;
width: 112px;
background:url(images/list.png);
background-position: 0 10px;
background-repeat: no-repeat;
background-color: #FFF;
width: 185px;
}
#access ul ul ul a{
border: none;
background: transparent;
}
.sub-menu .menu-item-object-custom a:hover{
height: 40px;
}
#access ul ul a {
border-bottom: 1px solid #BCBEC0;
color: #000;
font-size: 10px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 5px 7px;
width: 237px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
color: #000;
}
#access ul ul > a {
color: #000;
}
#access li:hover > a,
#access a:focus {
color: #FFFFFF;
}
#access ul li:hover > ul {
display: block;
}
#access ul ul .current_page_item > a {
color: #00ADEE;
font-weight: bold;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
color: #FFFFFF;
}
Basically, you need to find the rule where there is a :hover defined on a li element. It usually goes like this:
li:hover ul {
display: block;
}
for the second level menu to be visible, you'd need to add something like the following:
li:hover ul ul {
display: block;
}
This is just how it should be in theory, I'd need to see the part of the CSS that describes the menu so I could tell you an exact change to make.
I'm having some trouble with changing a CSS drop down menu to a drop up menu. I think I'm almost there, but for some reason some of the buttons are not displayed correctly (the text is moving downwards, but the menu is moving upwards). See crisislab.nl for the code in action.
Any help would be much appreciated!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
}
#navigation li:hover {
background: transparent url(gfx/navigation_hover.png) repeat;
}
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover {
text-decoration: none;
}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
bottom: 38px;
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}
When having a hard time finding bugs, always replicate and break the code into smallest simplest chunks.
Hope this would help: http://jsfiddle.net/ccS7q/
But you wouldn't be able to achieve drop up menu with the sublists listing upwards unless you use jquery or javascript with it. The fiddle above can't do listing upwards, you could though adjust manually the ul li.menu-item ul top value as the listing lengthens. Though its a lot of work. I would advise you to use jquery instead.
Remove that bottom: 38px; from below code:
#navigation li:hover ul {
bottom: 38px;/*Just Remove This*/
display: block;
}
Add top:0 to #navigation ul li ul li
#navigation li ul li {
background: none repeat scroll 0 0 transparent;
top: 0;/*Add This*/
width: 100%;
}
I think this will help you.
I'm almost certain this question has been answered in one form or another. Applying the changes I've found here and elsewhere doesn't seem to get me any further.
I'm trying to change the css menu from crisislab.nl from a drop-down menu to a drop-up menu. (As you can see on the site I'm currently working on it.)
Current problem I'm encountering is the fact that menu seems to be working fine, expect for the fact that the menu text is displayed downwards and while the menu is moving up (If this doesn't sound logical, please look at crisislab.nl)
See the code below for my current progress. Anyone willing to assist?
Many thanks in advance!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
} #navigation li:hover { background: transparent url(gfx/navigation_hover.png) repeat; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none;}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}
The basic difference from a dropdown to a dropup is the offset of the child ul:
Dropdowns have top:<x>px; and if you want a dropup you just say: bottom:<x>px;
I modified your code to make it work: http://jsfiddle.net/fJSVz/
Basically i changed the following rules:
#navigation li ul {
top: -9999px; /* <- removed */
display:none; /* <- this will trigger the hide/show */
}
#navigation li:hover ul {
bottom:20px; /* <- this is the trick to push the ul up */
display:block; /* <- show the ul on hover */
}