I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
Related
<div class="menu">
<ul>
<li>
<ul class="sub-menu">
<li>
<ul class="sub-menu">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Could You please tell me how to target just first ul element with "sub-menu" class as on an example above? Every pseudo-class I know targets both "sub-menu" ul-s at the same time.
One option:
ul:not(.sub-menu) > li > .sub-menu {
...
}
Hi I want to select the "Link" in class beers only but It always select all the links from sub-menu. I try
.beers:first-child does not work
.beers a:nth-child(1) does not work
.beers a:first-of-type (this apply to all the links of sub-menu)
<ul>
<li class="beers"><a>Link</a> only here
<ul class="sub-menu">
<li ><a></a></li> not here
<li><a></a></li> not here
</ul>
</li>
<li ><a></a></li>
<li ><a></a></li>
</ul>
Please help me
If you want to use style for a
.beers > a{color:green;}
If you want to use for li you have override
li.beers{ color:green;}
li.beers ul li{ color:black;}
You can get first element from child as below:
<style>
.beers >a {
background-color:red;
}
You have to maintain the elements level. Try the below one.
.beers>a
.beers:first-child
to
.beers li:first-child
With:
<ul class="beers">
<li><a>Link</a> only here
<ul class="sub-menu">
<li ><a></a></li> not here
<li><a></a></li> not here
</ul>
</li>
<li ><a></a></li>
<li ><a></a></li>
I have set this:
list-style: none outside none;
And HTML:
<ul class="menu custompozition4">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
but even though bullets are displayed. (I'm not quite sure that those are ul's bullets, because when you hover the text the "bullets" get underlined.)
Image Demo:
https://i.imgur.com/2wsnBqP.png
The third level from the menu
Have you tried setting
li {list-style-type: none;}
According to Need an unordered list without any bullets, you need to add this style to the li elements.
You can remove the "bullets" by setting the "list-style-type: none;" Like
ul
{
list-style-type: none;
}
OR
<ul class="menu custompozition4" style="list-style-type: none;">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
content: "\2022";
font-family: FontAwesome;
margin-right: 10px;
display: inline;
vertical-align: middle;
font-size: 1.6em;
font-weight: normal;
}
Is present in your site's CSS, looks like it's coming from a compiled CSS file from within your application. Perhaps from a plugin. Changing the name of the "menu" class you are using should resolve the issue.
Visual for you - http://i.imgur.com/d533SQD.png
In my case
li {
list-style-type : none;
}
It doesn't show the bullet but leaved some space for the bullet.
I use
li {
list-style-type : '';
}
It works perfectly.
In your css file add following.
ul{
list-style-type: none;
}
you can use it this way to
{
Fdata.map((point,index) =>(
<ul style ={{listStyle:'none'}}key={index} >
<li className="text_paragraph"style={{fontSize:"0.8rem",color:"#ff1100"}}>{point.list}</li>
</ul>
))
}
Try this it works
<ul class="sub-menu" type="none">
<li class="sub-menu-list" ng-repeat="menu in list.components">
<a class="sub-menu-link">
{{ menu.component }}
</a>
</li>
</ul>
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.
I have the following structure for a navigation …
<ul role="navigation">
<li class="page_item page-item-2">
Sections
<ul class="children">
<li class="page_item">One</li>
<li class="page_item">Two</li>
<li class="page_item">Three</li>
</ul>
</li>
<li class="page_item page-item-6">
About
<ul class="children">
<li class="page_item">Contact</li>
<li class="page_item">Members</li>
<li class="page_item">Become Member</li>
<li class="page_item">Whatever</li>
</ul>
</li>
</ul>
How can I hide the first appearance of each <a> inside the outer list elements?
In my case I'm talking about Sections and About
I thought
ul li > a { display:none; }
or
ul > li > a { display:none; }
should be doing the trick, but it hides everything.
That's because all the as are children of lis which are children of uls.
Your top-level ul has a role="navigation" so you can select that:
ul[role="navigation"] > li > a { display:none; }
I think the easiest and the most efficient way would be to add class like .hidden {display: none;}, but you could also add a class to the outer ul, and then:
.ul-outer-class > li > a { display: none; }
It's also more efficient than using attribute selectors.