What I'm trying...
I'm trying to make a menu with a hover effect. If you hover a link, it's background-color should change. If you go to the next one, it should change smoothly to the next link.
Problem
When you hover over one link and then go to the next one, there is a small gap between the elements. If your mouse is at that exact spot, nothing happens.
Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 21px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
Not Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 20px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
My observation
If you change the font-size just by one pixel, it works. If I use IE it works in both examples, but in Chrome only the Working One works :D
What I'm asking for...
Is this a Chrome bug or is there a possibility to make the 'not working one' work.
It's actually an interesting question. The "issue" is caused by the browser CSS that is reading the display:inline; of the a tag, and not having it fill the entire display:block; of the li tag.
You can fix this by using the following CSS rule
.menu-item a {
display:block;
}
Add display: block to the links. The link is smaller than the li
Remove the font-size and line-height from the menu-item, style the link directly. This behaviour most likely comes from rounding errors.
Related
Hi I am new to html and css and I would like to display a text on the right side when I hover the mouse over another text which is on the left side. I have a list of texts displayed on the left side here is the cod for it
<ul>
<li id="what">What Is Eco Flash?</li>
<br>
<li id="water">We Coneserve Water!</li>
<br>
<li id="chemicals">Chemicals Reduction!</a>
</li>
<br>
<li id="waste">No Waste-Water Run Off</li>
</ul>
and this is my css code for the list to be displayed on the left side
width:25%;
text-align: left;
font-family: 'Copperplate Gothic Light';
font-size: 20px;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
margin:.2em;
display: list-item;
now that I want to add is a small explanation text for each item in the list to appear on the right side when I hover over them.
I am new to the html and css and I have tried spam but it appears right under the text. How can I get the explanation text to appear on the right?
Thanks!
I like to use :hover on the parent and then display the child node like this:
Fiddle
ul li .description{
display: none;
}
ul li:hover .description{
display: inline;
}
<ul>
<li id="what">What Is Eco Flash? <span class="description">Boom a description</span></li>
<li id="water">We Coneserve Water! <span class="description">Boom a description again</span></li>
<li id="chemicals">Chemicals Reduction!</li>
<li id="waste">No Waste-Water Run Off</li>
</ul>
If you don't want to add extra markup to your list elements, you could use a data- attribute and the :after pseudo-class in CSS. I realize this may be a bit more advanced that what you're looking for, but it might be good for future visitors:
li:hover:after {
content: attr(data-explanation);
margin-left: 1em;
}
<ul>
<li id="what" data-explanation="My explanation">What Is Eco Flash?</li>
<li id="water">We Coneserve Water!</li>
<li id="chemicals">Chemicals Reduction!</li>
<li id="waste">No Waste-Water Run Off</li>
</ul>
You could add a new element to the li:
<li id="water">
We Coneserve Water!
<small>Explanation...</small>
</li>
Which is hidden by default:
li small{
display:none;
}
Then display it when the li is hovered over:
li:hover small{
display:inline;
}
I'm not sure why my CSS is not hitting my HTML and styling it correctly.
HTML:
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 2.0.0 </li>
<li class="divider"></li>
<li>Page 2.0.1 </li>
<li class="divider"></li>
<li>Page 2.0.2 </li>
</ul>
</li>
CSS:
.dropdown-menu li:hover{
background-color: green;
}
The class dropdown-menu should be hit and then when you hover over the li's inside it. I have tried adding an id as dropdown menu and changing the CSS to #dropdown-menu but it made no difference.
Also, is there an easy way to find out exactly how to hit the appropriate element as I find this is a frequent problem?
Ok here we go,
here is the working solution of your problem,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
clear: both;
background-color: green !important;
background-image:none !important;
display: block;
font-weight: 400;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
color: black !important;
}
i have just edited your code
http://jsfiddle.net/bf1cyptm/1/
:)
Try adding !important in CSS like:
.dropdown-menu li a:hover{
background-color:green !important;
}
If it does not work it could possibly be some other CSS code that is not letting it happen. So the solution to it is to do an inspect element and see which element is affecting it.
If you are not expert in than a best solution for you.
Please add a new class just after dropdown-menu like:
<ul class="dropdown-menu colorchange">
and call CSS by it like:
.colorchange li a:hover{
background-color: green;
}
It should work! You can use important here as well.
Try this
.dropdown-menu li:hover .dropdown-menu li a{
color: green;
}
I am currently making a horizontal drop-down menu, I have it working so that when you hover over an image, subsequent images appear below it, then when you move away from the main link; they disappear.
But the problem is, is I want it so that when you hover over one of the subsequent links, the links remain until you move away from them, at the moment they are disappearing when you move over the link.
HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><img id="sweets-button" src="images/Sweets_Button.png"></li>
<ul style="list-style:none" class="hidden">
<li ><img src="images/Sweets_Button-Dropdown.png"></li>
<li><img src="images/Sweets_Button-Dropdown.png"></li>
</ul>
</nav>
CSS:
#navigation ul.fixtures:hover{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
color: #000;
margin-top:1px;
-webkit-transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
background: rgba(255,102,51,0.8);
opacity: 50%;
}
ul.hidden{
display: none;
position:absolute;
margin-top:-90px;
margin-left:110px;
}
li.fixtures:hover + ul.hidden{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
display: block;
position:absolute;
margin-top:-20px;
margin-left:72px;
}
Thanks for any help!
Here is some jsfiddle, which may help you visualize it:
http://jsfiddle.net/QkY83/
Básically, You have to add the whole submenu (the ul element) inside of the parent menu item (li.fixtures). Here is a minimal example (updated in the jsfiddle you provided http://jsfiddle.net/QkY83/3/):
The HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><a> This is main link </a>
<ul style="list-style:none" class="hidden">
<li><a> This is first sub-link </a></li>
<li><a> This is Second sub-link </a></li>
</ul>
</li>
</ul>
</nav>
The CSS:
ul.hidden {
display: none;
position:absolute;
}
li.fixtures:hover ul.hidden {
/* Applied to the child ul */
display: block;
margin-top:-20px;
margin-left:72px;
}
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. Usually I am just copy paste existing code and try to make some adjustments to what I want. Anyway I am working on a navigation menu on a one-page website. So till now that works. However, I want to have a sub-menu. I tried some things, but I cannot really get what I want. What I want is when I click on a menu item, the sub-menu opens and activate the first sub-menu item.
I found an example: http://inthe7heaven.com/fb-john-doe/dark/
The photo section. I tried to replicate that, but I think the sub-menu is connected to the filtering function of the photogallery.
Can anybody give me some guidance in this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services</li>
<li class="photos">
Photos
<div id="filter" class="category_filter_list">
<span class="active_link" id="all">All</span>
<span id="cookies">Cookies</span>
<span id="bread">Bread</span>
<span id="baking">Baking</span>
</div>
</li>
<li class="">Classes</li>
<!--<li class="">Testimonials</li>-->
<li class="">Contact</li>
</ul>
</nav>
CSS
nav {
position: absolute;
z-index: 999;
right: 0;
top: 0;
width: 158px;
height: 600px;
display: block;
overflow: hidden;
behavior: url(js/PIE.htc);
}
nav.on_caption {
background: rgba(20,11,19,.6);
-pie-background: rgba(20,11,19,.6);
}
nav.on_caption a {
color: #d0ced0;
}
nav.off_caption {
background: rgba(20,11,19,.08);
-pie-background: rgba(20,11,19,.08);
}
nav.off_caption a {
color: #524b51;
}
nav a {
font-size: 1.143em;
text-transform: uppercase;
}
nav > a {
padding-left: 24px;
}
ul.pagination {
margin: 0;
padding: 0;
padding-bottom: 8px;
list-style:none;
}
ul.pagination li {
margin: 0px 0px 0px 0px;
clear: both;
padding: 8px 10px 0px 24px;
list-style: none;
}
ul.pagination li:first-child {
padding-top: 25px;
}
nav > a:hover,
nav ul.pagination li a:hover,
nav ul.pagination li.current a {
color: #90705B;
}
So I got this code based on the website I provided above. I want the same effect as in the photo section only then for a normal menu item that is not connected to a filter. That is, when the menu item is clicked, the menu gets extended with the sub-menu and the page goes to the first item in the sub-menu. In addition, the sub-menu item gets active.
I managed to get the sub-menu expand and collapse in jsfiddle using a tree-menu. I tested it in jsfiddle and there it works. However, it doesn't work in my website. The menu doesn't expand. The website I am using it in is a single page website. So the menu items are pointing to a section on the page. So, I guess that my href="sub-1" is not working because it's pointing at the 3rd section of the page.
Is there a simple work-around for this? I don't need any fancy jquery effects, it just needs to open.
Furthermore, when the parent item is clicked, the sub-menu needs to expand and needs to activate the first sub-item. How can I do this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
.pagination > li ul:target {
display: block;
}
Made some progress.
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
jQuery
jQuery(
function($)
{
$('.pagination a').click(function(){$(this).next('ul').toggle();});
}
);
This works now. When I click the menu item, the sub-menu gets expended. However, how do I let the sub-menu collapse again when another menu item is clicked? And how do I let the page automatically go to the first sub-menu item by default when the menu item is clicked?
If you could kindly hover your mouse over the MORE button in the menu here: http://jsfiddle.net/H8FVE/7/
You will see that there is a list containing the words Random text here. I tried to style that list but somehow the styling of the drop down menu prevents me from doing it. The style I used for the list is:
#trendcontainer {
margin-top: 0px;
padding-bottom: 1px;
}
#trend { width: 188px; }
#trend ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#trend film
{
display: block;
padding: 3px;
width: 188px;
background-color: #B40404;
border-bottom: 1px solid #eee;
text-align: center;
letter-spacing: 0.4px;
color: #FAFAFA;
}
Here is part of the HTML:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
<morecontainer>
<moreleftbar>
<trendcontainer>
<trend>
<ul>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
</ul>
</trend>
</trendcontainer>
</moreleftbar>
</morecontainer>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/7/
Can you figure out how to fix the styling? If you choose to answer, please be detailed as my coding knowledge is limited - ideally with an updated fiddle.
I just updated it. http://jsfiddle.net/H8FVE/11/
I added a class called .random in the css code and class="random" into the ul element you aimed to modify.
in the css I added the following code, although you may change it to fill your purposes. (if you want to style only the ul, change it to .random { }
.random li {
font-weight:bold;
}