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>
Related
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>
The HTML and CSS code is as follows;
I am using li ul as selectors to make my subjects hidden but it's not working
and I don't know why. Can some one please help (I am new to programming)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
<li> Chemistry Of Biomolecules </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
</ul>
</div>
li ul {
visibility: hidden;
position: absolute;
width: 150px;
}
li:hover ul {
visibility: visible;
}
I think that is what you want
Edit
Also you have error in your HTTML. Your HTML should be like bellow. (Modifying your HTML according your CSS. But this not means that you must write HTML in this way)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
<li> Chemistry Of Biomolecules
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
</ul>
</div>
CSS
li ul{
display:none;
position:absolute;
width:150px;
}
li:hover ul{
display: block;
}
You're selecting al ul tags in li tags, but your HTML is the other way around.
If you change your CSS to ul li { css_here } it should work.
Also when position: absolute; is set to the li items, the ul item doesn't wrap the items anymore, because they are removed from the document layout flow. So you might want to remove the position: absolute;.
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 {
I am working with a page with a ton of lists and links. I am trying to style each on a little differently, but fonts and color keep being overridden by a style a:-webkit-any-link user agent stylesheet. I have no idea where that even came from. I have tried styling my divs using classes, ids and even inline styling but none of them override the user agent stylesheet.
<div id="dafoot">
<ul id="footList">
<li class="footTop">
Home
</li>
<li class="footTop">
Bikes
<ul class="footUnder">
<li class="footSubBottom">Moutain</li>
<li class="footSubBottom">Road</li>
<li class="footSubBottom">Kids</li>
<li class="footSubBottom">Specialty</li>
</ul>
</li>
<li class="footTop">Activities
<ul class="footUnder">
<li class="footSubBottom">Seminars</li>
<li class="footSubBottom">Cycle for Fit.</li>
<li class="footSubBottom">Choose your bike</li>
<li class="footSubBottom">Rides</li>
</ul>
</li>
<li class="footTop">Contact
<ul class="footUnder">
<li class="footSubBottom">Visit us</li>
<li class="footSubBottom">Contact Info</li>
</ul>
</li>
<li class="footTop">Q & A
<ul class="footUnder">
<li class="footSubBottom">FAQ's</li>
<li class="footSubBottom">Ask a Q</li>
</ul>
</li>
<li class="footTop">About
<ul class="footUnder">
<li class="footSubBottom">History</li>
<li class="footSubBottom">Staff</li>
<li class="footSubBottom">Employment</li>
</ul>
</li>
</ul>
Owner Portal
</div>
CSS
/**/
/* Styling for the footer list */
/**/
#dafoot{
float: left;
margin-bottom: 10px;
margin-left: 10px;
margin-top: auto;
line-height: 15px;
width: 1077.5px;
margin-top: 10px;
position:relative;
color: white;
background-color: white;
}
#footlist{
font-size: 25px;
color: #ffbb00;
list-style: none;
}
a .footTop{
color: white;
font-family: Georgia;
}
Wow..... I didn't capitalize an L in footList. Working now. Hey noobs out there, check your spelling and capitalizing before you post on stack overflow.
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.