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
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've been fighting with this for probably 6 hours now and am completely stumped. I can't get the submenu to appear vertical on mouse hover. Here's the link from cssdesk. What am I messing up? I know it's something really simple.
http://www.cssdesk.com/n8WCm
If the link doesn't work for you, please see this snippet:
.nav8 ul .sub-menu{
position:absolute;
display:none;
}
.nav8 li:hover ul.sub-menu {
display: block;
background:#000;
border: 1px solid #ececec;
}
If there is more that you need, please let me know.
Add To your Css
.nav8 ul li li{
clear:both;
}
.nav8 ul li ul{
width:20% !important;
}
you should make it not floated left like the main menu, so i would suggest to clear it after every submenu li and give it a fixed width
.nav8 li:hover ul.sub-menu li {
clear:both;
width: 200px;
}
So basically i want to make my menu keep in hover state when their sub menu hovered,
i'd already try like this
but it still won't change as i want, where did i go wrong?
here's my snippet
#topmenu li li:hover a:hover{
color: #000;
text-decoration: none;
background-color: #fff;
text-shadow: 0 0 1px #000;
}
regards,
Not sure why you're hiding your sub menu with left: -999em; rather than display: none;.
Here is an updated jsFiddle: http://jsfiddle.net/JmkaM/1/ that uses display: none; and display: block; to show the sub menu.
What you want to do is display the sub menu when the user hovers a top level li. So you would do that like this li:hover ul. For your specifc CSS modify the following:
#topmenu li ul {
/* left: -999em; remove */
display: none; /* add */
}
/* add the following */
#topmenu li:hover ul {
display: block;
}
If you really need to use left for some reason then do the following:
#topmenu li:hover ul {
left: 0;
}
It will bring your sub menu back from being pushed -999em to the left. Though it might not be placed quite where you want it.
UPDATE 1
This will be the last time I help you. You need to learn that good feedback will help others help you. I understand that you are new but responding to answers with, "doesn't do what I want," does not help us or you.
I'm just guessing here at what you want based on the jsFiddle you linked to in the comments.
Here's the new jsFiddle: http://jsfiddle.net/JmkaM/2/
Below you will see the changes I made, before and after. I only highlighted the properties that I changed for brevity.
Before
#topmenu ul { /* ... */ }
#topmenu li ul {
padding-top: 0px;
padding-bottom: 0px;
}
#topmenu li li:first-child {
margin-top: 14px;
border: 0;
}
AFTER
/* added child selector '>' so only top level navigation
items have a background of red */
#topmenu > ul { }
/* set padding on all sides to 0 */
#topmenu li ul {
padding: 0;
}
/* removed whole rule - #topmenu li li:first-child */
UPDATE 2
Try this:
#topmenu > ul > li:hover {
background-color: white;
}
#topmenu > ul > li:hover > a {
color: black;
}
See this Fiddle :
http://jsfiddle.net/mSNqT/46/
This will be helpful.
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}
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)