I'm trying to make a dropdown menu, and I want it to show when I hover the text, but it's not working:
This is showing the submenus:
nav ul li:hover ul{
display: block; visibility: visible;
}
This si not showing the submenus:
nav ul li a:hover ul{
display: block; visibility: visible;
}
How can I make the second code work?
Try this selector:
ul li a:hover + ul
what the + does is affecting the ul right after the a tag.
Fiddle demo
Related
I have this in my css based off of line25 navigation tutorial.
I added this addition to my css and would like that when a user hovers over a menu icon, it wipes away the :focus span (icon text description) and only displays :hover span text at the moment. How can that be achieved?
nav ul li a:focus span {
display: block;
}
nav ul li a:hover span {
display: block;
}
Currently the :hover text and :focus text jumble on each other.
Here is the codepen on the exact thing.
Couple of things you can do:
First Idea: Put the :hover on always on top with a solid background-color.
nav ul li a:hover span, nav ul li a:focus span {
display: block;
background: white;
width: 100%;
}
nav ul li a:hover span {
z-index: 1;
}
Or you could hide the focus one as soon as you hover over the list:
nav ul:hover li a:focus span {
display: none;
}
#navbar-lg ul li a:hover span, nav ul li a:focus span {
display: block;
}
I tried to check the issue multiple times in the top navigation but whenever I hover a menu the drop down always disappear. Here is the website http://dev2.websiteblue.com/vuerealestate/index.html. Any help will be appreciated. Thank you
change ul li a:hover+ul to ul li:hover a+ul
this is your final code:
ul li:hover a+ul {
display: block;
visibility: visible;
color: #9E0000;
z-index: 100;
}
Add Change ul li a:hover+ul to ul li:hover ul
Remove padding of .ul_navigation
change display: inline of .navigation > ul > li to display: inline-block
Add display: block to .navigation ul li a
I am changing some parts of my WP site to RTL.
Everything is OK except for sub-menu items. when the cursor goes over a menu item, obviously some sub-menu item opens. Now my problem is with its direction of opening. In other words, I need sub-menu items be opened to left.
I tried a simple CSS code,
#nav {direction: rtl;}
Unfortunately this code is effective only regarding menu text direction.
Is there any CSS trick making sub-menus open to LEFT?
My domain address is http://sciself.com
Thanks
Shaqpad
Simply add text-align: left; to the selector:
#wrapper #nav ul li ul li a, #wrapper #sticky-nav ul li ul li a
FullCode:
#nav ul ul, #sticky-nav ul ul {
left: auto !important;
right: 0 !important;
}
#nav ul ul li:hover ul, #sticky-nav ul ul li:hover ul {
right: 170px !important;
left: auto !important;
}
Im trying to style the submenu on my wordpress menu
http://www.milknhny.co.uk/SofiaWork/
I tried
.headermenu ul ul
etc,... and it didnt work, can anyone suggest the correct class structure?
ive already tried
.headermenu ul li ul li also
thanks
Your ul's got an id attribute. Why not use it in css:
#menu-header-menu - I think it is the top-level menu.
#menu-header-menu .sub-menu - targets ALL sub menus of top-level menu.
Not sure what you are trying to customise, but the anchor text also has a background which does not help styling, so if you remove this it can help you style the list item better.
#headermenu ul ul li a {
background: none;
}
#headermenu ul ul li a:hover, ul.headermenu ul ul li:hover {
background: none;
}
Then use :
#headermenu ul ul li {
background: red ;
}
AND:
#headermenu ul ul li:hover {
background: yellow;
}
I have ceated a dropdown menu using the following css
.menu li ul {display: none;}
.menu li:hover > ul {display: block;}
But the problem is whenever the menu dropsdown the content below shifts down. How can I prevent that.
You can prevent that by positioning the sub menu absolute.
.menu li ul {display: none; position: absolute; }
You also have to set
.menu { position: relative; }
as said in the comment by Tae. If you do not, the sub menu will probably set to the top left corner of the page.