How can I remove the underline bellow "-"? I only want the text to be underlined on Hover not the "-"
-- DEMO --
Many thanks!
HTML
<ul class="menu">
<li>
Commercial Property Management
<ul>
<li>
Industrial
</li>
<li>
Office
</li>
<li>
Retail
</li>
<li>
Shopping Centres
</li>
</ul>
</li>
<li>
Mixed-Use Residential Property Management
</li>
</ul>
CSS
ul.menu li li a:before {
content: "-";
margin-right: 8px;
}
Edit 4 years later: This answer is pretty much a low-quality duplicate of https://stackoverflow.com/a/8820459/3285730. I'd recommend going there and getting an actual explanation.
Try giving it display:inline-block;:
ul.menu li li a:before {
content: "-";
margin-right: 8px;
display:inline-block;
}
JSFiddle Demo
content of the :before selector is counted to the a-tag as it creates a pseudo-element within the element.
Add display:inline-block; to the definition to solve this issue.
Related
I am creating a drop down menu using CSS. However when I select the menu it selects in the space that the List will appear and from the UL. Not just the UL if that makes sense and i cannot work out why it does that. Please see the code for the example:-
The CSS:-
#navigation .menu ul {position:absolute; top:45px; left:0px; opacity:0; background:black; transition:opacity .25s ease; -webkit-transition:opacity .25s ease;}
#navigation .menu li:hover > ul {opacity:1; margin:0;}
#navigation .menu ul li {height:25px; width:200px; overflow:hidden; border-bottom:red 1px solid; border-left:none; margin:none; transition:opacity .25s ease; -webkit-transition:height .25s ease;}
#navigation .menu ul li:hover {overflow:hidden; margin:0;}
#navigation .menu ul li a {text-decoration:none; height:25px; width:200px;}
#navigation .menu ul li:last-child {border-bottom:none;}
HTML code:-
<div id="navigation"> <nav> <ul class="menu">
<li> <h1> Homepage </h1> </li>
<li> About <ul class="ulbox">
<li class="dm"> <img src="images/Avengers.jpeg" width="25" /> The Site </li>
<li class="dm"> <img src="images/Doctor Strange.jpeg" width="25" /> Find Us </li>
<li class="dm"> <img src="images/Guardians.jpeg" width="25" /> The Company </li>
<li class="dm"> <img src="images/Inhumans.jpeg" width="25" /> Contrived Page </li>
<li class="dm"> <img src="images/Thor.jpeg" width="25" /> Drop Down Success </li>
</ul> </li>
<li> Images <ul>
<li> The Site </li>
<li> Find Us </li>
<li> The Company </li>
<li> Contrived Page </li>
<li> Drop Down Success </li>
</ul> </li>
<li> The next page <ul>
<li> The Site </li>
<li> Find Us </li>
<li> The Company </li>
<li> Contrived Page </li>
<li> Drop Down Success </li>
</ul> </li>
<li> Terms and Stuff <ul>
<li> The Site </li>
<li> Find Us </li>
<li> The Company </li>
<li> Contrived Page </li>
<li> Drop Down Success </li>
</ul> </li> </ul> </nav> </div>
I can't see why the menu is showing from outside the UL nav bar. Can someone help?
There're several things that is wrong with the CSS.
First: The position: absolute will remove the element out of the flow. So won't be counted as something existing to calulate the position of sibling and parent elements.
Second: Your expecting display still using the sub Menu flow. In order to make another parent Menu to flow down. So you must not use position: absolute. By removing it you will get back the flow of your Menu. (the position: relative; is not necessary I just left it there because lazy removing it)
Third: Now you encounted with the sub Menu being displaying without hovering. To deal with it there is 2 ways. But my jsfiddle only use one. Just add display: none to the sub Menu. And then display: block when its parent is hovering. (1)
#navigation .menu ul {
display: none;
z-index: 1;
position:relative;
}
#navigation .menu li:hover > ul {opacity:1; margin:0; display: block}
(2)
NOTE:
(1): If you want it to look nice with animation. Use the max-heigth: 0 property as transition. (instead of using display: none;
(2): z-index and position:relative; is not necessary. Just that you need to remove position: absolute then it will work
http://jsfiddle.net/7r7zLuar/3/
UPDATE: The fiddle link I posted has the working code now. :not(:last-child) and :nth-last-child(n + 2) both work perfectly.
I'm trying to use the nth-child or nth-last-child selector to select every li in a ul except for the last one. The catch is, the length of the list can vary from 1 to 5 elements. I haven't been able to find any documentation or examples of how to accomplish this.
Here is the HTML for the ul:
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
Here is my current code:
ul > li:nth-last-child(-1n+4) > a:hover {
color: red;
}
This code still selects the last element in the list. I've also tried the code below, but that doesn't select anything. I tried a number of other combinations as well, but they either didn't work at all or selected the last element.
ul > li:nth-child(1):nth-last-child(2) > a:hover {
color: red;
}
Here is a fiddle.
Use :not(:last-child) to target all except the last.
http://jsfiddle.net/96nd71e3/1/
Use :nth-last-of-type or :nth-last-child
http://jsfiddle.net/t0k8gp4d/
li:nth-last-of-type(n + 2) a {
color: red;
}
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
You can use this
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
CSS
ul > li{
background:red;
}
ul > li:last-child{
background:black;
}
But if you absolutely need to change their style outside of the main li element use this
ul > li{
background:black;
}
ul > li:not:last-child{
background:red;
}
I am currently trying to add arrow indicators on my navigation menu for items which have submenu options.
Currently I am using this CSS:
.mainNav li > a:after {
color: #444;
content: ' ▾';
}
But this adds a dropdown arrow to every <li> regardless of if there is a submenu or not. Is there a way with just CSS to only add this arrow to items that have sub-items?
Thanks!
No. CSS has no contains child selector. You'd probably be better to just add a class to the li element. For example:
<li class="has-child">
The Link
<ul class="child">
<li>Child 1</li>
</ul>
</li>
Your CSS selector would in turn look like:
.mainNav li.has-child > a:after {
color: #444;
content: ' ▾';
}
You could have jQuery add the class for you, if that's an option:
$('.mainNav li:has(ul)').addClass('has-child');
jsFiddle Demo
CSS has no contains child selector.
However it has various sibling selectors, only-child and not(:only-child)
Since you add indicator to the anchor, use following CSS
.mainNav li>a:not(:only-child):after {
color: #444;
content: ' ▾';
}
<div class="mainNav">
<li>
The item with child
<ul class="child">
<li>Child 1</li>
</ul>
</li>
<li>
No child item
</li>
</div>
Yes you can without any jQuery : https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
trying to select an adjacent's child element with CSS... not really sure how to
This is the HTML structure
<ul>
<li>
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
I want to say that there is a menu with multiple levels. When theres a UL existing within a LI then the needs to have a dropdown/expand icon... so I thought if I use the adjacent selector I can determine if this level has kids to expand and this is what I thought would work but didn't:
ul li a ~ ul .icon {
// doesnt work
}
ul li a .icon ~ ul {
// doesnt work
}
This works but I need to target the .icon
ul li a ~ ul {
// works
}
Cheers, Dom
Building upon my comment on your question. If you have control over how the HTML for the menu is generated, a workaround would be to add an extra class to each li-element that has a sub-menu. Like this:
<ul>
<li class="has-submenu">
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
Then you could use a selector like this:
.has-submenu .icon {
/* Do your stuff here */
}
ul is a child of li, not the anchor. So ul li ul .
If you want to select it as a sibling, then ul li a + ul
I have this list :
<ul class="topnav" id="topnav">
<li><span>community</span>
<ul class="level1">
<li><span>Commun1</span>
<ul class="level1">
</ul>
</li>
</ul>
</li>
<li><span>Events</span>
<ul class="level1">
<li><span>Event1</span>
<ul class="level1">
<li><span>Event2</span>
<ul class="level1"></ul>
</li>
</ul>
</li>
</ul>
</li> the the first ul under community and the first ul under Events
</ul>
I need to access only the first ul with the class level1 Im using In each ul I need to access only
.topnav li > ul
{
//code here
}
I've updated my code still can't access the only the fi
Use like this:
#topnav li:first-child ul
{
// your style
}
See the working demo : http://jsfiddle.net/bqBdn/4/
Note: Your HTML code is little bit buggy, So correct it as I did in this demo. Use proper tagging for ul, li inside main liThanks!
it works for me: jsfiddle demo
ul.topnav li > ul {
color:blue;
}
Try this:
#topnav li ul:first-child
from here
.topnav li > ul.level:first-child
will access only the first ul with a .level class at the first level after the li.
This is because your html is wrong. You can't have an <li /> as a child of another <li />. The browser is correcting the mistake - bringing all the <ul />'s under the initial one to the same level. Your css is working, your html is the problem.
Are you able to change this?