I have a navigation tree that continuly build a nested list of categories.
Is there a way to indent the nested category 5px, to the nth level
/* the traditional way, but this is fixed to 1 level */
#sidebar ul li ul {
margin-left:5px;
}
#sidebar ul li ul li ul {
margin-left:10px;
}
In CSS3 you can use nth-child selector
http://www.w3schools.com/cssref/sel_nth-child.asp
#sidebar ul li ul:nth-child(1) {
margin-left:5px;
}
Related
This is my CSS code:
nav ul li ul li .toggle {
padding:14px 20px;
color:#FFF;
font-size:17px;
}
Now I want to change nav into some class like .multilevel. How can I write CSS class along with another class?
Shall I write like below:
.multilevel ul li ul li.toggle {
padding:14px 20px;
color:#FFF;
font-size:17px;
}
I think it is wrong. Can anyone tell me how to do this?
Thanks in advance.
you can use comma separator CSS selectors as below
.multilevel ul li ul li.toggle,
nav ul li ul li .toggle {
padding:14px 20px;
color:#FFF;
font-size:17px;
}
I've got a safari-specific problem with a hover effect probably related to the synthetic click vulnerability fix in iOS 8.4.1. When the user tries to click on a link there is no response.
The menu is a simple CSS-only menu. I have created a demo here: https://jsfiddle.net/baad95e3/
#menu :hover ul {
right:auto;
left:0;
}
#menu :hover ul ul {
left:-9999px;
width:160px;
padding-left:5px;
background:none;
}
#menu li ul :hover ul {
left: 170px;
right:auto;
}
#menu li ul li ul li a {
text-align:left;
color:#000;
}
#menu li ul li ul li a:hover {
color:#000;
}
What would be a good workaround without losing the hover effect.
Hacky but can work, did for me in some cases:
* { z-index: 0; }
I have a list with some nested lists inside it like this:
<ul class="menuSports">
<li>
<ul>
<li>
<ul>
<li>
<li>
</ul>
</li>
</ul>
</li>
<ul>
and am using a before element to create an arrow so that the items are displayed like a dropwdown list:
#menuSports li ul li:before { content: '\25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}
The problem is the before element is being applied to all li elements from the one specified onwards, kind of like this:
#menuSports li ul li:before { content: '\25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}
#menuSports li ul li ul li:before { content: '\25BA'; position:absolute; color:#cecece; padding-left: 5px; padding-top:5px;}
Is there a way to stop this from happening, so that only the li specified in the first selector is given the element?
P.S I can not change the html code or use javascript, using css is my only option.
ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }
The first selector above is a decendant selector. It will select any list items that are anywhere underneath an unordered list in the markup structure. The list item could be buried three levels deep within other nested lists, and this selector will still match it.
The second selector above is a child combinator selector. This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.
For more information try this link
You can specify level(s) of LI using descendant selector.
So,
#menuSports > li {/* only first level LIs */}
#menuSports > li > ul > li {/* only second level LIs */}
#menuSports > li > ul > li > ul > li {/* only third level LIs */}
Alternative is to reset styles for next levels
#menuSports li li:before {content: 'content'; /* second and each nest level LIs */}
#menuSports li li li li:before {content: ''; /* fourth and each next are reseted */}
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.
I am trying to change the background colour of an anchor element when it's in a hover state, the problem is I am not able to achieve this with style I have below.
jsfiddle
http://jsfiddle.net/fwP6g/
css
.dropdown ul{
margin:0; padding:0; float:left; width:100%;
}
.dropdown ul li{
list-style:none; float:left; width:100%;
}
.dropdown ul li a{
float:left; width: 265px; height:20px; padding:5px;
padding-top:10px; color:#000; font-size:12px;
border-bottom:1px dotted #666; background-color:#FFF;
}
.dropdown ul li a:hover{
background-color:#F80101; !important
}
.dropdown ul li:last-child a{
border-bottom:none;
}
.dropdown ul li a#pink{
background-color:#FFE8E8;
}
html
<div class="dropdown">
<ul>
<li>Orders</li>
<li>Favourites</li>
<li>Account</li>
<li>Settings</li>
</ul>
</div>
I'm confused, I don't why this is not working, any help would be appreciated.
The !important needs to go before the closing ;.
.dropdown ul li a:hover {
background-color:#F80101 !important;
}
jsFiddle example
It's not semantically correct to have two elements with the same id. Also, using ids for your selector gives the rule a very high precedence, which is why you need to use !important.
I would suggest giving the last 2 list item links a class of pink instead of an id.
Then you would just need to declare the .pink rule before the :hover rule. Since both rules have the same precedence, and the :hover rule comes after, it will override the .pink rule.
http://jsfiddle.net/fwP6g/2/
HTML
...
<li><a href="/account" class='pink'>Account</a></li>
<li>Settings</li>
...
CSS
.dropdown ul li a.pink{
background-color:#FFE8E8;
}
.dropdown ul li a:hover{
background-color:#F80101;
}
Change your id="pink" to class="pink", than in your css add this to your hover .dropdown ul li a.pink:hover
Add this:
false:
.dropdown ul li a:hover{
background-color:#F80101; !important
}
true:
.dropdown ul li a:hover{
background-color:#F80101 !important;
}