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.
Related
Hello I need help trying to change the sub nav color hover. I've tried to write code but it only changes the color or the full nav.
When I change it in my CSS it only changes the background color not the hover, and then when I tried to change the hover it changed for the full header menu and the sub nav. I want to change the hover only the the sub nav.
header li > a:hover{
color:#888888;
}
header li > a #active{
color:#888888;
}
header li ul{
overflow: hidden; display: none; background: #f9f9f9; z-index:20;
}
header li ul li a{
line-height:50px;
padding-left:30px;
width:260px;
}
header li:hover ul{
position: absolute; padding: 0; display: block; width: 200px;
}
not clear about your question. do you wanna change submenu color on hover
header li > ul > li > a:hover {background:red}
no this only changes the background to the sub nav not the hover. Here is a screen shot of the HTML. thanks everyone
Heading
My sub menu disappears immediately after I move my mouse pointer to scroll towards the sub menu. Feel like I have screwed my CSS somewhere. I could not figure out after several attempts to make it stay active. I followed few tutorials(have a look at it) where they have called the hover on the ul instead of a(anchor), I tried similar ways but could not achieve what I want. Please point out where I have made the mistake. Here is my fiddle(my code). Sample CSS code for hover is below.
#topnav ul li ul
{
display: none;
position: absolute;
text-align: left;
background:#510000;
top:30px;
}
#topnav ul li:hover ul
{
display: block;
}
Put the padding on your list items instead of your ul or container. That way the dropdown overlaps your hover element and your browser never thinks that you hovered out of the element. See this:
#topnav li {
display:inline-block;
padding:10px 0;
margin-right:30px;
position: relative;
}
http://jsfiddle.net/jeffreyTang/q5cmqLrf/1/
You can also give
#topnav ul li ul {
padding-top:30px
}
instead of:
#topnav ul li ul {
top:30px
}
The problem is with your padding being at the nav level and you trying to make the drop down appear below it. Because you position your dropdown away from the parent li, you're no longer hovering over it when you move your mouse down. To fix, remove the padding from the nav and add it to the li.
remove padding from here:
#topnav{
display:block;
clear:both;
width:500px;
margin:0;
padding:0;
text-align:center;
}
add to here:
#topnav li{
display:inline-block;
padding: 15px 0 15px 5px;
margin-right:30px;
position: relative;
}
remove top from here:
#topnav ul li ul {
display: none;
position: absolute;
text-align: left;
background:#510000;
}
fiddle: http://jsfiddle.net/zj8krh95/7/
Here's a way to do it (it's more of a trick):
http://jsfiddle.net/zj8krh95/5/
#topnav ul li:hover {
padding-bottom: 10px;
margin-bottom: -10px; /* so that the menubar's height stays the same */
}
#topnav ul li:hover ul {
margin-top: -10px; /* so that the menu opens at the right position */
}
Basically, on hover, i extend the menu item's height so that no mouseout is trigger when i move down to the menu.
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;
}
Removed link, problem solved
The menu at the top is supposed to be a dropdown menu, but it expands to the right instead.
My CSS is this (I believe this is the relevant bit anyway)
#primary-nav, #primary-nav ul { list-style: none; margin: 0px; padding: 0px; }
#primary-nav ul { position: absolute; top: auto; display: none; }
#primary-nav ul ul { left: 100%; top: 0px; }
#primary-nav li { float: left; }
#primary-nav li li { float: none; position: relative; }
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { display: none; }
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul { display: block; }
I have no clue where exactly the direction for the menu is set.
Take a small and nice reading here.
Remove the position: absolute; from the CSS of #primary-nav ul also maybe have a look at using FireBug, it's prilliant at experimenting with these things. Also what browser are you looking in? FF displayed the menu vertically but just wasn't aligned properly and didn't have the background.
I am seeing this menu as a vertical drop-down, not a horizontal one. Please specify what browser you're viewing in when asking CSS questions, as it makes a big difference in how to answer your question. Let us know if it is fixed, and what fixed it for future readers.
One thing I noticed is that your menu items poke out of your vertical list at the right. Try applying the padding to only the <li> element, not the anchor tag. This should fix your problem. When you apply it to both, you have to keep in mind that first you're putting the padding on the <li>, then adding more padding to the inner element so that it expands outside of it's container which only has the first amount of padding applied.
It is kindof dropping down now, but in Firefox 2 it flashes and is barely unclickable due to that. And in IE7 it's poorly aligned and totally unclickable...