I am using the veggie theme on Wordpress and have added subcategories to the primary menu, which appear as a dropdown list with mouse hover. However, with mouse out the dropdown disappears. Any ideas on how I can fix it?
The website is http://iceyog.gr/ and the menu element is "FROZEN YOGURT"
Thanks!
there is a few px of space above the ul element (dropdown).
In the style.css file on line 2207 there is this code:
.main-navigation ul ul {
background: white;
float: left;
margin-left: -0.875em;
padding: 0 0.875em;
position: absolute;
top: 1.75em; // (Remove this line to fix the issue)
left: -999em;
text-align: left;
width: 180px;
z-index: 99999;
}
I think it's because the hover event is set on the a element instead of the li element.
Since the ul child group is in the li element, when you hover the li you can still see the dropdown when you hover it instead of hover the a element which is not hover when you hover the dropdown child menu.
Here's a basic example to explain my thoughts
Related
I work with drop-down menu and I have one issue. When I open the drop-down menu, ul list belonging to li element that I clicked on appears at the same height as the li element, but I want to align that ul list with previous ul list so the ul list that will open on the right side will be at the top of the drop-down navigation.
Hope you understand. I attached 2 images below the post. At the first image is the current drop-down how it usually works and the second image represents the result that I want to achieve.
Thank you for your help
Old drop-down navigation
New drop-down navigation
Try this css
#media (min-width: 768px) {
.dropdown-submenu {
}
.dropdown-submenu .dropdown-menu {
top: 0px;
left: 100%;
margin-top: 0;
border-top-left-radius: 0;
position:absolute;
height: 100%;
}
By the way this is not a problem this how it works :)
I am creating a menu for the mobile, that when I click on an item in a submenu appears. The problem is that if I do this when the page is scrolled a bit, the page scrolls back up ... (whether open or close the submenu).
This obviously does not happen when the page is not scrolled
This is the code:
http://jsfiddle.net/qsq4y9d8/3/
this a css of submenu item
.lisottomenu {
letter-spacing: 0.02em;
display: block;
background: #E4BF85;
border-top: 1px solid #fff;
font-size: 14px;
list-style-type: none;
width:100%;
}
this css of item parent
ul li.leaf {
background: #646464 none repeat scroll 0 0;
border-top: 1px solid #a0a0a0;
display: block;
font-size: 15px;
letter-spacing: 0.02em;
list-style-type: none;
position: relative;
}
This is the problem:
(the problem is the auto-scroll)
I hope you can help me, even though the code is a bit long and I do not write well in English ...
Per my comment:
Any <a> with an href containing a "#" places a # in the URL which in turn looks for an empty anchor. Since one doesn't exist, it defaults to scrolling to the top.
Remove the "#" from your links and it won't scroll to the top anymore
Change
Link
to
Link
and it should stop scrolling to the top.
You have so many elements being created and removed and styles erased and added to the elements every time the menu is clicked, I think the browser just tries to refresh the layout or something.
Try adding and removing classes that show and hide your sub menus, and have your elements in your html from the start, instead of creating and destroying so much (unless they need to be dynamically generated from the server or something)
The problem is that the sub menu is making the entire window higher, so it has to make this scroll just when you are closing the sub-menu.
It is just how the browser reacts to this kind of height change.
One solution would to give the side menu defined max-height, and overflow-y:scroll.
#content, #sidebar-first {
display: inline;
float: left;
position: relative;
overflow-y: scroll;
max-height: 370px;
}
This way, when the the sidemenus are opening it wont affected the height of the document.
fiddle - http://jsfiddle.net/qsq4y9d8/9/
I need help in margin problem. I am using a accordion menu like this: http://jsfiddle.net/knovice/ppdp1w04/2/
and there is margin-top for every second level sub menu e.g if you click Design then its sub menus are having margin-top.
I am trying to remove margin-top of only first second level sub menu. That should gets apply to every first second level sub menu of my accordion menu.
I tried this below code but its not working.
#dhtmlgoodies_slidedown_menu > .slMenuItem_depth2 > :first-child { margin-top: 0 ;}
How should I do that?
Many thanks in advance.
NOTE: I am using external js which adds the classes on load. (pointed out by Banana in the comment section)
I did manage to make it work as:
.slideMenuDiv2 > ul > li:first-child a {
margin-top: 0 !important;
}
EDIT:
Or, to run away from !important directive, you need to drop dhtmlgoodies_slidedown_menu bit from your dhtmlgoodies_slidedown_menu .slMenuItem_depth2 selector to make it:
.slMenuItem_depth2 { /* Sub menu items */
margin-top:1px;
background-color: rgb(204, 204, 204);
margin-top: 1px;
padding-left: 15px;
color: #0065AA;
}
so you could have:
.slideMenuDiv2 > ul > li:first-child a {
margin-top: 0;
}
which I like much more
JSFiddle is here
Please check jsfiddle.
If i understood your requirement correctly. I have put border to second level first element border in red color.
You can apply required style to element
ul li > ul li:first-child{
border:1px solid red;
}
I am trying to slide up a list element and reveal more content which appears to be hidden "under" the list element, but when the animation occurs all other list elements jump down slightly. When I remove the content under the list element but leave the animation everything works fine.
How can I make this work without effecting the other elements in the list?
It is difficult for me to explain this, so here is a fiddle of what I am talking about: http://jsfiddle.net/YNBxz/1377/
click on any one of the blocks in the view section to see the animation.
If you comment out the jQuery(this).children('.block-content').slideToggle(500); you can see what it SHOULD look like during the animation.
You need to change the positioning of .block-content to position: absolute. That will fix the sliding of the other li elements. Then, to fix the positioning of the .block-content, remove width: 100%, change the right positioning to right: 0, and add top: 45px. The css for .block-content is then:
.block-content {
font-size: 12px;
font-family: Helvetica, sans-serif;
display: block;
background: #333;
padding: 10px;
position: absolute;
top: 45px;
right: 0px;
height: 120px;
}
Also, if you want the bottom of .block-content to line-up with the bottom of the li's, change the jquery to animate to 140px, not 115px.
You can see the results: http://jsfiddle.net/YNBxz/1379/
So I have this navbar I'm making; I have a Jsfiddle to demonstrate. If you hover over an element, the sublist appears, but if you look carefully, its left edge is just 1 pixel in front of the navbar element that summoned it.
Is there any CSS rule I can add to get rid of this i.e. move the sublist back a pixel? I know it is possible to achieve this with JS (get every navbar element, calculate its distance from the left, take its sublist and give it a left value of one less than that of the element), but for now I'd like to avoid it for now.
I'd prefer a CSS solution if possible, but of course it it isn't, please tell me and, if you can, provide a JS alternative.
jus add margin-left: -1px; to your #nav li:hover ul to push it 1 pixel to the left.
see it working here.
Negative margins to the rescue
http://jsfiddle.net/pZy8V/4/
#nav li:hover ul {
display: block;
position: absolute;
margin: 0 0 0 -1px; /* margin: 0; */
list-style: none;
padding: 0;
}
#nav li:hover li {
float: none;
}
If you remove all of your borders the problem goes away. So the answer may lie in redesigning your HTML/CSS border usage
See this revided JSFiddle
If you just want a quick and dirty fix you can add the following to your original CSS
#nav li {
float: left;
position:relative;
left:-1px;
}