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.
Related
I am trying to make the title, that has it's own CSS class bold. However, also the children are getting the style. Code:
<ul class="product-categories">
<li class="cat-item cat-parent">
<ul class="children">
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>
</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>
So i tried to add .cat-parent {font-weight: bold;} however, all children are getting bold too. Same if i tried adding :first-of-type.
1: Why are the children getting the style, even though they don't have the css class "cat-parent"
2: What should I do to make it work?
In CSS the child element gets the style of the parent element until a styling is specified for the child element. Example
.parent{
color: red;
}
<div class='parent'>
Parent
<div class='child'>Hello<div>
</div>
To handle this, you must specify a style for the child; see example below.
.parent{
color: red;
}
.child{
color: blue;
}
<div class='parent'>
Parent
<div class='child'> Child </div>
</div>
There's a couple ways to solve this. You can add styling to the .children class by either doing font-weight: normal; or even font-weight: initial;.
.cat-parent {
font-weight: bold;
}
.children {
font-weight: normal;
font-weight: initial;
}
<ul class="product-categories">
<li class="cat-item cat-parent">parent
<ul class="children">
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>
</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
<li class="cat-item">...</li>
</ul>
In my code, there are list items and they all have a category. Each categories are sequentially added for each list items.
Here is my HTML:
HTML
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
CSS
ul li{display:none}
ul li.A:nth-of-type(1){display:block}
ul li.B:nth-of-type(1){display:block}
ul li.C:nth-of-type(1){display:block}
I am trying to display only the first element of each category. I am expecting below output:
A1
B1
C1
Here is my fiddle - https://jsfiddle.net/9pdby6st/200/
I observed that nth-of-type works only when the very first element is that category.
Here are the limitations:
Cannot change html structure
Cannot use javascript
Can use SCSS. Any advice?
You could use the adjacent sibling selector + for the elements that end with a class name and start the next tag with another class name.
Eg: .A + .B {display: block}
In the above case, only one instance is possible and the first element with the classname B displays and the other siblings are hidden.
You could use it to create many combos such as .B + .C {display: block} and so on.
JSFiddle link
ul li {
display: none
}
ul li.A:first-child {
display: block
}
ul li.A+.B {
display: block
}
ul li.B+.C {
display: block
}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
As seen here: https://stackoverflow.com/a/8539107/1423096
You can set the property for all the items and then undo it for the siblings that come after the first one.
ul li {
color: red
}
ul li.A:nth-of-type(1) {
color: blue
}
ul>li.B {
color: green
}
ul>li.B~li.B {
color: red
}
ul>li.C {
color: yellow
}
ul>li.C~li.C {
color: red
}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
Try this (inspired by alo Malbarez answer)
ul li{display:block}
ul>li.A~li.A {display: none}
ul>li.B~li.B {display: none}
ul>li.C~li.C {display: none}
<ul>
<li class='A'>A1</li>
<li class='A'>A2</li>
<li class='A'>A3</li>
<li class='A'>A4</li>
<li class='B'>B1</li>
<li class='B'>B2</li>
<li class='B'>B3</li>
<li class='B'>B4</li>
<li class='C'>C1</li>
<li class='C'>C2</li>
<li class='C'>C3</li>
<li class='C'>C4</li>
</ul>
I am trying to get a mega menu to work by using hover to activate divs
i have tried it numerous ways, but i just cant get them to show on hover
here is the basic idea in jsfiddle : http://jsfiddle.net/mXx64/5/
and here is the code
HTML
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1">
menu1
</li>
<li class="menu2">
menu2
</li>
<li class="menu3">
menu3
</li>
<li class="menu4">
menu4
</li>
</ul>
</div>
<div class="menu-area1">
menu1
</div>
CSS
.nav-container ul li a:hover .menu-area1 {
display: block;
}
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
any help would be appreciated
edit please ignore the spelling mistake, i know its there, but the code doesnt work when it is fixed anyway :(
It will not work because your ".menu-area1" is not in the anchor if you want keep this structure you need to add jQuery otherwise just do like below
working- http://jsfiddle.net/R37rr/
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1"> menu1
<div class="menu-area1"> menu1 </div>
</li>
<li class="menu2"> menu2 </li>
<li class="menu3"> menu3 </li>
<li class="menu4"> menu4 </li>
</ul>
</div>
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
.nav-container ul>li:hover .menu-area1 {
display: block;
}
I'm not good on JQuery but this what I got:
Fiddle
$('li').hover(function () {
$('.menu-area1').show();
});
$('li').hover('out',function () {
$('.menu-area1').hide();
});
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.