My question here is when I hover over recipes and when I move forward to the sub menus how do I make the blue hover perfectly fit the sub headings. Like the color is not covering the text fully. And for a better understanding please do read and run my code if you like.
I am using this in the CSS
nav li:hover ul {
display: block;
}
Here is the link please do check it.
https://jsfiddle.net/harisfaisal/q68n7ro4/2/
It's because nav li {width:20%} in your code is affecting all li elements including submenu so the color covers only 20% in submenus. It can be fixed by adding width:100%; in your nav li li {} selector.
Note: your code has repeated selectors, it's better to merge them to improve readability.
I'm currently building a site using the bootstrap 3 framework and I've come into a problem. I'm trying to style the background of a drop down with list items. If I use the following code:
.dropdown-menu > li > a{
background:#92a240;
color:#fff;
}
it styles one shade of green, I then want to use the :nth-child selector to style the other links a darker green, I'm using this code:
.dropdown-menu > li > a:nth-child(odd){
background:#b5c950;
color:#fff;
}
however this makes all of the link backgrounds a light color and not the odd ones.
any help would be appreciated.
Thanks.
I guess your html structures is like this:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and not like this:
<ul>
<li>
</li>
</ul>
Since your css is going for the second html structure and I doubt it's like that one. If your structure is like the first one, then...:
Instead of targeting the a you should target the li with the odd:
.dropdown-menu > li:nth-child(odd) > a {}
I'm building a website based on 960 grid system (www.960.gs),
and I've encountered a problem.
I want to put drop down menu but with no success. I tried many tutorials
but i only got more confused.
Is there a way to create a menu for this kind of website?
this is the website by the way:
My website
Thank you for you help.
The best way to do this by using just CSS is by using absolute positioning on the contents of your drop-down, and have another unordered list inside each li that needs drop-downs.
So the markup looks like this:
<ul id="nav">
<li><a>Nav Item with dropdown</a>
<ul id="dropDown">
<li><a>Dropdown Menu Item</a></li>
<li><a>Dropdown Menu Item</a></li>
<li><a>Dropdown Menu Item</a></li>
</ul>
</li>
</ul>
You will then set #nav li (or #nav li a) to position:relative; and have the #nav li ul set to position:absolute; with it's position off the side of the screen using left:-9999px;
Then set the hover of the element you set to position relative (li or li a), while including the child ul:
#nav li:hover ul {
position:absolute;
left:0;
}
This way, on hover, the child element will come into focus underneath the parent menu item.
See it working here.
I would like to float the dropdown menu on other items.But below code shows the dropdown menu but dropdown menu is under the items. I have used the z index but it not works fine for me . May be wrong execution of z index.
<style type="text/css">
li.css3videos ul {display: none;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
</style>
<div id="css3navigation" style="position:absolute;top:119px;">
<nav id="css3mainnav"> <ol>
<li class="css3videos">Videos
<ul>
<li>Trailers</li>
<li>Movies</li>
</ul>
</li>
So, it sounds like the problem you're having is that the drop-down menu, when dropped down (or open), is showing up behind the elements that are physically lower on the screen than the main menu. Is that right?
Make sure your menu parent ha both a position value as well as z-index value, and ALSO make sure the objects you want your menu to appear over the top of have position values too. You can assign z-indexes to them as well if you want to be thorough.
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.