I'm trying to create a hover effect for the whole anchor element but it's not working, as soon as the mouse is out of the text the drop down menu disappears:
Here is the test site.
Css:
.menu{}
.menu li{float:left;margin-right:24px;list-style-type:none;height:46px;}
.menu li a{width:100%;text-transform: uppercase;color:#39444A;text-decoration:none;font-weight: bold;font-size:18px;display:block;height:46px;}
.menu li a:hover{border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #E87D05;color:#E87D05;height:46px;display:block;}
ul.sub_navigation , .sub_navigation
{
position: absolute;
display: none;
z-index: 100;
background-image: url('/images/menu-bg-png.png');
background-repeat:repeat-y;
padding:10px 0px 10px 28px;
}
Where am I getting it wrong?
CSS ( add ):
.menu li a {
position: relative;
z-index: 5;
}
In your case is because the div #slider-container is overlaping the #header div. I see that the #slider-container is absolute.
In this case you can add extra 20 - 30px on the TOP property and get rid of the padding-top.
The other thing to do is just to add position:relative and z-index:10 (for example) on the #header div
Try this:
.menu > li:hover .sub_navigation {
display: block;
}
the anchor elements have the size of the text and nothing else.
The space between link and link is the right margin of the li.
remove
li {margin_right: 40px}
and set
a {padding_right: 40px}
Related
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 having problems getting a menu center aligned.
Tried settings nav and wrap-nav class to
margin 0 auto; width: 100%;
but still cannot get it working, so have reverted that back for my example linked below.
I've created a jsfiddle page to show me menu as it is now.
As you can see it sits over to the left, I would like to get this centered.
http://jsfiddle.net/x6vLep9g/
If anyone can help it would be much appreciated, thanks.
I managed to center using the following:
.menu ul {
display:inline-block;
}
.menucentre {
text-align:center;
}
DEMO
Did 2 things:
1) Added "text-align: center;" to ".menu ul"
.menu ul {list-style: none;margin: 0;padding: 0; text-align: center; }
2) Removed float from ".menu ul li" & added display inline block.
.menu ul li {position: relative; display:inline-block; background-color: #333;padding: 6px 5px 0px 5px; margin: 17px;}
enter link description hereCenter it like this
change nav style to:
nav {margin:15px 0px;text-align: center;}
and also add display:inline-block to .menu ul
.menu ul {list-style: none;margin: 0;padding: 0;display:inline-block}
fiddle
Hi i added this on my nav menu CSS. It will add a triangle effect on the bottom of my menus. The problem is that, it has added it on the sub menus too..
.nav-menu li a:hover:after {
content: "";
display: block;
border: 10px solid #000;
border-bottom-color: #48c5f2;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}
How can i remove the triangle effect in my submenus?
I'm guessing i should put something like this?
.nav-menu li li a:hover:after { SOME CODES I DONT KNOW SO IT WILL REMOVE THE TRIANGLE; }
If you want to overwrite it, use:
.nav-menu li li a:hover:after {
content:none;
}
If that's the correct selector, it will work assuming it is more specific, and it is placed after the initial declaration..
Alternatively, if you don't like that approach, you could just prevented it from being applied to the children by using the child selector > on the initial declaration:
.nav-menu > li a:hover:after {}
Basically, this is applying the initial styling to the li element who is a direct child of .nav-menu. Thus, the children elements, (.nav-menu li li) won't receive the styling, and thus won't have to be reset.
Aside from that, there is also always the :not selector.
I am having trouble with my submenu. It's a simple drop down menu that I have beside my posts and I got it working and all. The problem is that depending on my scroll position, it will sometimes reach the bottom of my screen. I was thinking about making something similar to the menus of http://9gag.com where the menus are fixed in 50% of the screen. But I guess that would be too complicated.
I tried to set the parent menu z-index to a lower value but it didn't work? I'd be thankful for any help.
Here's the fiddle: http://jsfiddle.net/HyKuR/
.Post .Bottom .nav {
display: block;
line-height: 24px;
font-weight: bold;
margin: -140px 450px 0px;
position: absolute;
z-index:2;
}
.Post .Bottom .nav li.submenu ul {
visibility:hidden;
-webkit-padding-start: 0 !important;
margin-left: 40px;
margin-top: -215px;
bottom:100%;
background-color: white;
border:1px solid gray;
}
.Post .Bottom .nav li.submenu:hover ul {
visibility: visible }
.Post .Bottom .nav li.submenu ul li {
border-bottom:1px solid gray
z-index:10 !important;
}
As drip says give us your code in a jsfiddle so we can help. But from the top of my head I'd say your problem is down to your position:absolute on both menus. You should use position:relative on the parent menu then use position:absolute on the submenu so that it is placed based on the parent menu rather than the screen.
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)