I´m trying to create a menu with the list 'ul'.
The problem I´m facing is:
The submenu doesn´t appear at the top of its corresponding menu link, but, below.
You can see it at this link:
http://jsfiddle.net/6r6e8/
Thanks.
Try including a top value in your CSS:
ul.menu ul {
top: 0;
}
You could add margin-top: -21px to your ul.menu ul styles as a quick fix.
Related
I'm using generate press and add some megamenu CSS unfortunately upon clicking the submenu it's not clickable here is the link
I tried to use this mega menu to create columns for each sub-menus
https://hrcstaging.wpengine.com/
here is the CSS that I added
https://docs.generatepress.com/article/building-simple-mega-menu/
.main-navigation ul ul {
pointer-events: inherit;
}
ok this works fine now
I cannot seem to get the sub-menu to appear on this website I built: http://website-test-lab.com/sites/mirandaparsons/
If you use Dev tools/Firebug, and check .sub-menu to display: block; then you can see that the sub-menu does appear, but not in plain sight. I've tried adding z-index to several of the menu areas with no luck.
The odd thing is, that it does appear correctly in FF on Windows?!
I haven't pasted the code here because there would be so much to copy and paste.
Any help would be much appreciated.
Thanks
I think that what you need is a background-color to .sub-menu and position relative to .nav I just tried to set it and you can see the sub menu well :
.navigation .nav {
position:relative;
}
PS : Worked on firefox 33 Mac
You need to add this to your CSS:
.navigation .nav {
position: relative;
}
This would properbly be usefull to read: http://www.w3schools.com/css/css_positioning.asp
Add this css to your stylesheet
#site-navigation.main-navigation{
position:relative;
}
I want my drop down list top apear inline aswell as in the same place. So if you over over each list it will just change the text. http://868rcacs.ca/test.php
Right Now I have the drop down list working. But when you hover over Admin the list will apear right below it and not to the far left. Is there a way to fix this without using individual classes or id's?
Add the following styles:
nav{
position:relative;
}
nav li ul {
display: none;
position: absolute;
left: 10px;
}
This ensures that your layout doesn't break and you get what you want. Don't forget to thank me if this works ;-) Just kidding!
Im trying to create a menu bar which uses image buttons.On my menu bar, I can see my images on it but I can not click them. I used text-indent: 100%; white-space: nowrap; overflow: hidden; in my css file to hide links text. My link text became hidden but links became inactive. Moreover i tried text-indent:-9999px; but result was same. I could not find the problem maybe my html or css structure is wrong. Could you pls check it ?
I updated html and css file on jsfiddle
jsfiddle
try this:
nav ul li a{display: block}
Its Working
nav ul li a
{
display: block
}
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}