I have a blog over at wordpress.com and there is a problem with the dropdown box on my main navigation.
When the mouse is hovering over, it appears, but when you move out of it to click a link its goes.
Heres the blog: https://readingartlab.wordpress.com/
Dropdown menu for 'Workshops'. This problem occurs when I added margin-top: 11%; so that it would align with the rule beneath it.
Any help? Thanks in advance.
EDIT:
This is the CSS that has been changed:
.main-navigation ul ul {
padding: 8px 0;
margin-top: 11%;
}
So, the issue here is that there is a set amount of space devoted to your .menu-item -- when you hover over it, that triggers the submenu, but in order to move into the submenu, your mouse is actually leaving the space that triggers the hover effect. In Chrome Developer tools, when you click on the list item for Workshops in the HTML window, you see exactly how much space is around the list item:
Ideally, you'll reconfigure the CSS for that whole navigation area so there's more padding around the list item.
You can also try to trigger the focus class that the drop-down caret uses via jQuery, but that runs into some of the same problems and you end up either having to leave the submenu open until you click elsewhere or set it to remove on mouseleave of a larger parent element, like the header, which is pretty wonky.
You can't hover the margin of an element. Use padding or border instead to fill the gap between the parent en child element.
Have a look at this minimalistic demo on jsfiddle.
ul.menu > li {
display:inline-block;
padding:5px;
}
ul.menu > li > ul {
display:none;
border-top:5px solid $navigation-background-color;
margin:5px -5px -5px;
}
ul.menu > li:hover > ul {
display:block;
}
ul.menu > li > ul > li {
display:block;
padding:5px;
}
Add a little padding to the bottom of your parent menu item
.menu-item-has-children > a {padding-bottom: 10px; margin-bottom: -10px; }
If you target just those with a child item - .menu-item-has-children - it won't affect the other menu items. The negative margin-bottom offsets the expansion of the menu area that occurs with the adding of the padding-bottom. Using the > selector says, "Target the <a> elements that are a direct descendent just one level deep of the things with class menu-item-has-children." (So your extra padding won't affect the spacing / padding on your submenu.)
This is a great article about Child and Sibling Selectors in CSS - CSS Tricks: Child and Sibling Selectors
I hope these codes will solve the issue.
.site-header {
border: 0;
padding-bottom: 0;
}
.search-navigation {
border-top: 0;
margin-bottom: 0;
}
#media screen and (min-width: 960px) {
.search-navigation {
margin-top: 30px;
padding-top: 0;
border-top: 1px solid #cecece;
border-bottom: 1px solid #cecece;
}
}
.main-navigation li {
padding: 15px 0;
border: 0 !important;
}
#media screen and (min-width: 960px) {
.main-navigation .menu-item-has-children {
padding-right: 0;
}
}
.main-navigation .menu-item-has-children > a {
padding-right: 38.5px;
}
.main-navigation a {
display: block;
padding: 0 15px;
border-right: 1px solid #e0e0e0;
}
.main-navigation>div>ul>li:last-child a {
border: 0;
}
It was happening because there was a gap between submenu and < li > which you are using for triggering hover.visual
Related
Q: Would anyone know how to style the sub-menu on my website so it doesn't over-lap as it does now?
I have tied to do it within the CSS but all the submenus move across, rather than just the child menus.
cherwelluk.com
Roll-over Windows and try and select timber alternatives.
.nav.navbar-nav li ul.sub-menu li a {
color: #FFF;
text-transform: uppercase;
padding: 5px 0px;
display: block;
font-size: 14px;
}
Image
You can add this CSS rule to move the sub-sub menu to the right of the sub menu:
.nav.navbar-nav ul li ul.sub-menu {
left: 200px;
}
Try adding the following CSS.
.sub-menu{margin-left:10px}
I made a simple navigation menu using a ul, but when you hover over it, the background color will not change the entire background. I think it may have to do with my padding elements. How do I fix this?
Here is a Fiddle of my code: https://jsfiddle.net/b8js8zkq/
I have looked at How do I make the hover background color fill the height of the link? and did not find a good answer there, so please don't mark this as a duplicate of that.
The problem with your code is, you have margin and padding on both <h3> and <li>. So remove them and add them as padding to the <a> tag. And you are done!
The padding and margin of each 15px constitute 30px of total padding to <a>. That's what I have done below:
.header li {
border-bottom: 1px solid #888;
font-size: 20px;
padding: 0;
}
ul h3 {
margin: 0;
padding: 0
}
.header a {
display: block;
padding: 30px;
}
Fiddle: https://jsfiddle.net/19r4a4ft/
I'd recommend changing your css from this
.header a:hover{
background-color: #f3e5d8;
}
to this
.header li:hover{
background-color: #f3e5d8;
}
This will make it so any list item within your header class will change its background colour when hovered.
https://jsfiddle.net/b8js8zkq/1/
Fixed fiddle.
You remove the padding on both <h3> and <li>, and add that same padding to the <a>-tag.
jsfiddle update
Old
.header a:hover {
background-color: #f3e5d8;
}
New
.header li:hover {
background-color: #f3e5d8;
}
You want to change the color of the li element rather than just the a tag
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I am a developer and I don't know CSS properly. Here I am stuck with a simple problem. I am using Sitefinity CMS for development. I one of the page I used ul and li. CSS given by designer for li is as below
.listing li {
list-style: circle url(/images/default-source/main_library/bullet.gif?Status=Temp&sfvrsn=2);
margin-bottom: 7px;
}
I just copied his HTML into my page but I observed li bullets are not at the same position as designer gave. I used Developers Tools and inspected. My CMS adding its own style to li as below
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
When I disable padding: 0; then it appears to be at desired position. But how can I disable padding: 0; from development environment. Means any CSS that can remove padding: 0; effect?
You need to apply padding-left: 20px; to the ul.
Add this to your css:
.listing { padding-left: 20px; }.
Edit: looks like you already have styles defined for .listing, so just append that to the .listing block, I believe it's line 730 in common.css.
The more accurate the selector, the more precedence it has.
ul li { padding:5px; }
#my-Div div.another-div ul li { padding:0px; }
In this example, the more specific li element will use the 0px padding instead of the 5px. You can also add !important after an attribute if you need to ultimately override and existing style on an element.
ul li { padding:0 !important; }
Here is my Codepen demo which I want to show like image snap below the link:
Codepen Demo
Snap:
I used this css:
.menu > ul > li:first-child {
color: red !important;
}
To make left most link Red but still it shows Grey line.
Actually it should look like this:
Problem 2:
The length of the line above alert box should span to entire width of the page. How to do this?
I tried with chaging:
.menu > ul {
display: block;
list-style: none;
border-bottom: 0.1em solid #9e9e9e;
width: 152%; // makig it 200% increase width of entire page. Rather I want to increase the width of lie only
margin-left: -2%;
}
Try this
.menu > ul > li:first-child a {
color: red !important;
}
DEMO
Your code is fine, the only issue is that the a is getting overrid by the color from actual properties for the hyperlink as
a {
// properties..
}
Change the code to this:
.menu > ul > li:first-child a {
color: red !important;
}
Which will apply the settings to the hyperlink of the left most list item under the un ordered list in the element with class menu! :)
You forgot to add anchor selector at the end of:
.menu > ul > li:first-child a {
color: red !important;
}