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
Related
Currently working on a website for a client, who wants a custom navigation bar, which aligns with a background image.
A working solution is as below:
The issue I have is that when the browser is resized/certain desktop monitors, the navigation bar does not align with the background. The reason for this is I have coded in pixel values and not made it properly responsive yet, which is where i'm currently stuck. Could anyone guide me on how to make the angles change depending on the browser size/viewport in order to achieve the alignment i require across all desktop/tablet devices?
Can provide the code as required, the navigation bar is just a vertical menu with margin-lefts though.
.nav {margin:0; position: fixed; z-index: 9999999; left:734px; top: 79px; width: 200px;}
.nav ul {}
.nav ul li {list-style: none; border-bottom:1px solid #7c818c; padding-bottom: 10px; padding-top:11px; width:170px; font-size: 14px;}
.nav ul li:nth-child(2) {margin-left:27px;}
.nav ul li:nth-child(3) {margin-left:55px;}
.nav ul li:nth-child(4) {margin-left:87px;}
.nav ul li:nth-child(5) {margin-left:118px;}
.nav ul li:nth-child(6) {margin-left:146px;}
.nav ul li:nth-child(7) {margin-left:180px;}
.nav ul li:nth-child(8) {margin-left:205px;}
.nav ul li:nth-child(9) {margin-left:235px;}
.nav ul li a {color: #7c818c; text-decoration: none;/* text-transform: uppercase;*/}
.nav ul li a:hover, nav ul li a.active {color: #fff;}
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'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
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;
}