i have a slight problem with the :nth-of-type() selectors.. maybe you can help out.
I can't manage to select only the first a.
how to do this?
Thanks
<nav>
<ul>
<li>Home</li>
<li>Produkte</li>
<li>Beratung</li>
<li>Kontakt</li>
<li>Anfahrt</li>
</ul>
and the sass
li > a:nth-of-type(1){
&:before{
content:"1";
display:inline-block;
width:20px;
background:black;
border-radius:50%;
margin-right:5px;
}
}
You can select first li and then a inside li:first-child a, you can do the same with li:nth-of-type(1) a or li:nth-child(1) a
li:first-child a {
background: blue;
}
<nav>
<ul>
<li>Home</li>
<li>Produkte</li>
<li>Beratung</li>
<li>Kontakt</li>
<li>Anfahrt</li>
</ul>
</nav>
Related
I'm developing a css Tree view and I want, if is possible, to keep the hover effect only on the element that has children:
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
What I've done in css was:
.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
but this doesn't work like I expected.
You want the :hover effect only inside the "Item 1" right?
.treeview > ul > li:hover > span {
color: red;
}
Also check this Fiddle.
UPDATED (based on your comment)
.treeview li:hover > span {
color: red;
}
And updated Fiddle. This however will also trigger the span on "Item 1.1.1" when hovered...
Is that what you want ?
http://jsfiddle.net/Defoncesko/p63b9/
HTML
<div class="treeview">
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
</div>
CSS
ul ul li:hover {
background-color:#eee;
border:1px solid #94a0b4;
color:#000
}
I think this is what you want. I added another larger li in my fiddle so you can see.
.treeview ul>li>span:hover {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
.treeview ul>li>span ~ ul>li>span:hover {
background:#fff;
border:none;
color:#000
}
Demo:http://jsfiddle.net/QdEEf/1/
Edit: Actually If im truly understanding your question. Youre looking for a way to determine if the li has a ul as a child then give that li a hover if it does. If this is the case youre gonna need to use javascript to determine if it has a ul child. There is no way to do this with CSS
This is the HTML:
<nav class="listfirst">
<li class="header"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
</nav>
and the CSS:
#bottomnav{
width:1000px;
height:300px;
position:absolute;
top:5px;
left:10px;
}
#bottomnav .list1{
float:left;
margin-right:20px;
}
#bottomnav .listfirst{
float:left;
margin-right:20px;
margin-left:22px;
}
#bottomnav li{
width:165px;
height:22px;
margin-left:10px;
list-style-type: none;
display:block;
}
The lists in IE7 are just displaying as blocks and overflowing the container, whereas i need them to float left to stay in the bottomnav container.
I know it is probably a simple css fix but does anyone have any suggestions?
Please try below css code.
#bottomnav .list1{
float:left;
margin-right:20px;
*float:left; // this property apply in IE7
}
I think your html is incorrect. Always need to put <li> between an <ul> tag, and perhaps you missed to close <a> tags?
Example:
<nav class="listfirst">
<ul>
<li>Foo</li>
<li>Foo</li>
</ul>
</nav>
you have to specify:
#bottomnav li {
float:left;
}
cheers
Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?
Example of markup:
<nav>
<ul class="clearfix">
<li class="dropdown-link">Top Link
<ul class="clearfix dropdown-holder">
<li>
<div class="arrow"></div>
<div class="dropdown-holder-inner">
<ul class="dropdown">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS is quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/
image: http://i.stack.imgur.com/k24Du.png
I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a fixed.
<div id="nav">
<ul class="clearfix sf-menu">
<li class="dropdown-link">Top Link
<div class="clearfix dropdown-holder">
<div class="arrow"></div>
<ul class="dropdown clearfix">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</div>
css
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
position:absolute;
left:-999em;
width:218px;
top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}
.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
box-shadow:0 0 5px #bec2c8;
background:#fff;
height:100%;
position:relative;
z-index:1;
padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
float:left;
padding:5px 0;
width:198px;
color:#333;
}
Hope it helps.
I have a feeling that Your example is overcomplicated.
This is the simplest implementation of nested menu (with hover) I know of:
<ul class="outer">
<li>
<p>TOP MENU</p>
<ul class="inner">
<li>link1</li>
<li>link2
<ul class="inner">
<li>link2.1</li>
</ul>
</li>
<li>link3</li>
</ul>
</li>
</ul>
With a little bit of css:
.outer {
border: 1px solid red;
width: 100px;
}
.inner {
display: none;
}
.inner li {
padding: 0 0 0 10px;
}
.outer li:hover > .inner {
display: block;
}
Tested on IE8 (in IE7 mode with IE7 Standards). Check here: http://jsfiddle.net/BUuyV/11/
Here is what you can do:
<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
left: 0px;
top:-4px;
}
</style>
<![endif]-->
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
I want to make a drop menu like the one in http://www.homeshop18.com/ with css only without jquery in particular the All category menu.I have tried css drop down menu but the problem is i am unable to fix the second level menu at the top. any suggestion will be appreciated.
Can't understand what you problem is from the way you posted the question but here is a quick menu I put together that only uses CSS that functions like the menu on the site you posted.
HTML:
<ul class="main">
<li>all
<ul class="sub">
<li>books
<ul class="sub2">
<li>fiction</li>
<li>biography</li>
</ul>
</li>
<li>mobile
<ul class="sub2">
<li>android</li>
<li>cmda</li>
<li>battery</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
border:1px solid;
padding:1px;
}
.main {
list-style:none;
position:relative;
}
.sub, .sub2 {
list-style:none;
position:absolute;
display:none;
width:75px;
}
.sub2 {
float:left;
left:75px;
top:0px;
}
.main li:hover .sub,
.sub li:hover .sub2{
display:block;
}
I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that?
HTML
<style>
.match {
}
.match ul {
}
.match ul li {
float: left;
margin-right: 50px;
}
.match ul li:last-child {
display: none;
}
</style>
<div class="content">
<div class="match">
<ul>
<li>Wade Barrett</li>
<li style="">VS</li>
</ul>
<ul>
<li>Shaemus</li>
<li style="">VS</li>
</ul>
<ul>
<li>Randy Orton</li>
<li style="">VS</li>
</ul>
<ul>
<li>John Cena</li>
<li style="">VS</li>
</ul>
<ul>
<li>Edge</li>
<li style="">VS</li>
</ul>
<ul>
<li>Chris Jericho</li>
<li style="">VS</li>
</ul>
<p class="clear"></p>
</div>
</div>
The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.
You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.
Change
<li style="">VS</li>
to
<li class="vs">VS</li>
And use this instead of your current :last-child selector:
.match ul:last-child li.vs {
display: none;
}
What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.