<div id="action-nav">
<ul>
<li>selected</li>
<li>selected</li>
</ul>
</div>
and the styles:
#action-nav
{
text-align:center;
}
#action-nav ul li
{
height: 48px;
width: 112px;
list-style:none;
float: left;
margin-right:20px;
}
#action-nav ul li a
{
text-decoration:none;
padding-top :15px;
height: 48px;
width: 112px;
display: block;
}
#action-nav ul li:hover a
{
color:#fff;
}
#action-nav ul li:hover, #action-nav ul li a.selected
{
background-image: url('../Images/link_red_bg.jpg');
color:#fff;
}
the a.selected class is the issue. It should look like it does in the adjacent li:hover style. What did I miss?
You need to subtract the padding from the height.
It might be repeating, in which case,
background-repeat: no-repeat;
use line-height instead of height
Try moving the "selected" class to the parent <li>.
Additionally, specifying the exact width and height of the child <a> is redundant; simply change both values to 100% so they automatically match the dimensions of the parent <li>.
Related
This is my full code: https://jsfiddle.net/dv6gxtoh/2/
I want the dropdown box to expand and be the full width of it's content (so it doesn't have to drop things down a line) but I also don't want it to stretch the main dropdown button to the same width.
The best example I can give is something a bit like this:
http://i.stack.imgur.com/w3ym8.png
This is the CSS I am using:
* {
margin: 0;
padding: 0;
}
.click-nav ul {
position:relative;
display: inline-block;
}
.click-nav ul li {
position: relative;
list-style:none;
cursor:pointer;
display:inline-block;
}
.click-nav ul li ul {
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker {
position:relative;
color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background:#196F9A;
}
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display:none;
}
.click-nav .no-js:hover ul {
display:block;
}
The closest I could get it to remove position:relative; from .click-nav ul which does the trick, except the dropdown menu doesn't sit under the button which opened it.
Any help would be appreciated.
Seems to me white-space : nowrap is what you need, i.e
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
white-space: nowrap;
}
forked fiddle -> http://jsfiddle.net/j5ckepbm/
Check the shared fiddle..
you need to make few changes to your css, like adding and width/min-width to your dropdown.
white-space:nowrap
Click to see the fiddle, commented lines are mine changes
You may need to add one more class with a fixed width to get it done.
.click-nav ul li ul li {
width: 150px;
}
Here is a fiddle
Here is the code : http://jsfiddle.net/o3omng/hrh1s7ss/
When I use float : left to li tags,
li tags go out of div whose class is na_cate.
Please Maintain li tags in center of na_cate,
and make those li tags left aligned.
Set text-align: center; to div.na_cate ul and display: inline-block; to div.na_cate ul li
TRY - DEMO
You could do this:
.na_cate ul {
list-style: none ;
text-align: center;
}
.na_cate ul li {
display: inline-block;
}
You need to clear the float of your container.
.na_cate li {
float:left;
margin-left:20px;
}
.na_cate ul {
list-style:none;
overflow:hidden; /* clearfix */
}
Alternatively, here is another clearfix that doesn't use overflow but pseudo elements instead.
I'm doin' a navigation bar for a website. I created it etc. but when I go to one of the sub menu's it disappears..
here's my HTML:
<ul id="menu">
<li>Welcome</li>
<li>Review
<ul>
<li>Customer Reviews</li>
<li>Leave a Review</li>
</ul>
</li>
<li>Gallery</li>
<li>Discounts
<ul>
<li>Refer us!</li>
<li>Claim discount</li>
</ul>
</li>
<li>Send me an email!
</li>
</ul>
</nav>
and my CSS:
/* nav */
nav{
text-align:center;
}
nav a:visited{
color:black;
}
nav a{
text-decoration:none;
color:black;
}
#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
border:1px solid black;
margin-left:10px;
margin-top:5px;
border-radius:4px;
}
#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}
#menu li a:hover {
color:orange;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:6px;
margin-right:1px;
padding: 2px;
}
/*#menu, #menu ul {
margin:0 auto;
padding: 0;
}*/
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
and a little JSFiddle for ya: http://jsfiddle.net/nv741s01/
If you hover your mouse over a menu option [that has a sub-menu] long enough and then do it, it works, but people won't be willing to wait three seconds every time they want to visit a sub menu, so how do I resolve it so that it works as soon as you go to it?
any help would be much appreciated, thanks in advance :)
It was because there was a little gap between the sub menu and the menu, here is the fixed JSFiddle:
http://jsfiddle.net/nv741s01/3/
And here is what I changed:
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top: 1px;
margin-right:1px;
padding: 2px;
}
I changed the margin-top to 1px.
The margin of an element doesn't capture hover events. Use padding instead. Make these changes:
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
padding-left:10px;
padding-top:5px;
margin:0;
}
/* add this rule */
#menu li a {
border:1px solid black;
border-radius:4px;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:0px;
margin-right:1px;
padding: 2px;
}
Fiddle: http://jsfiddle.net/nv741s01/2/
You are using margin to position the submenu away from the main item. Since margin isn't part of the actual element it doesn't trigger any hover behaviours. Instead, use padding on the child ul element, since padding is actually considered part of the child's box. This will make the hover behaviours trigger consistently when moving the mouse from parent to child.
You also describe that there's a 3 second delay somewhere - that's impossible from this code, and I cannot reproduce it obviously.
Your dropdowns are disappearing because as you move your mouse cursor down, there's a gap between the parent menu item and the child menu item.
When the mouse leaves the parent li space, it no longer applies to the hover state, and so the CSS rule is ignored, leaving the child menu hidden.
If it helps, I tend to use a combination of margins and padding, to 'bump together' the parent and child menus, to help navigation.
So I have been building this css navigation bar, I have a few problems hope someone can help
. This is how it is Navigation bar . But on setting the float property of the ".cssmenu ul li" to left the whole green background vanishes Navigation with float enabled . Why does this happen? Also I have used the :before pseudo class to create the underline extension effect but that doesn't seem to stretch to the whole width even I have set the width : 100% on hover.
Thanks in advance.
since "Links to jsfiddle.net must be accompanied by code "
.cssmenu{
width : auto;
background : #27ae60;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: block;
padding: 0;
}
things mess up on enabling the float property in .cssmenu ul li .
Parent elements of floated elements do not expand to their children's size. Think of this like the children were position: absolute.
To force the parent element to encompass all of its floated children, add overflow: hidden to the parent. In your case, you would add this to .cssmenu:
.cssmenu {
overflow: hidden;
}
JSFiddle
As for the underlining, setting the width of the :before element to 100% makes the underline the same width as the a element. This is the width of the text.
Instead, you should add the :before element to the li element:
.cssmenu ul li:before {
...
}
.cssmenu ul li:hover:before {
...
}
Now 100% width means the width of the li element, which is the "full" width of a menu item.
Note: You'll also have to change some metrics of the :before element such as top, left, etc.
JSFiddle
Use
.cssmenu {
overflow: hidden;
}
Demo here
Are you trying to inline the navigation elements? Wondering what you're trying to accomplish, that may help us better answer your question. I'm a little unclear, but here goes nothing!
Here's my shot:
http://jsfiddle.net/jasonbelmonti/CYR7V/
Is this what you're looking to achieve?
This is the css I used:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
.cssmenu{
width : auto;
background : #27ae60;
overflow: hidden;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: inline-block;
width: 33%;
padding-top: 15px;
padding-bottom: 17px;
}
.cssmenu ul li a{
display : block;
position : relative;
font-family: "Open Sans";
color : #fff;
text-decoration: none;
padding : 0 px;
text-transform: uppercase;
transition : all .3s;
font-size :14px;
}
.cssmenu ul li a span
{
padding-left: 15px;
}
.cssmenu ul li a:before{
content : ' ';
display : block;
height :3px;
width : 0px;
background : #2c3e50;
position : relative;
top : 30px;
left : -25px;
transition : all .3s;
}
.cssmenu ul li a:hover:before{
width : 100%;
left: 0;
}
.cssmenu ul li a:hover{
color : #34495e;
}
I have a ul with tree list items in an horizontal view.
All the list items have the same background image:
I want to overlap the background images so it looks like this:
Here is my jsFiddle
CSS:
div#menu ul li{
height:30px;
display: inline;
list-style-type: none;
width: 60px;
background: url(http://i.stack.imgur.com/adwVj.jpg);
background-size: 100%;
background-repeat: no-repeat;
padding-right: 5px;
padding-left:30px;
z-index:2;
}
div#menu ul li:first-child{
padding-left:20px;
z-index:3;
}
div#menu ul li:last-child{
padding-left:35px;
margin-left:-30px
z-index:1;
}
HTML:
<div id="menu">
<ul>
<li>Account</li>
<li>Registreren</li>
<li>Winkelwagen</li>
</ul>
</div>
It goes wrong with the z-index!
you should first give at least position: relative to your list-items, otherwise z-index has no effect. then just use
div#menu ul li + li {
left : -20px;
}
so the labels will remain close together (this rule will be applied starting from the second <li> element)
Example fiddle : http://jsfiddle.net/Faffz/3/