I am trying to style my responsive nav drop-down menu and change the background color but can't seem to figure it out. I would like the items in the list below to have a gray background of #cccccc.
the full site is located here:
http://adanburlington.com/giotto2/index.html
HTML:
<ul class="nav hidden">
<li>Fire Alarm Systems</li>
<li>Security & Intrusion</li>
<li>Closed Circuit TV</li>
<li>Access Control</li>
<li>Systems Integration</li>
</ul>
Responsive CSS:
#media screen and (max-width : 1100px){
ul.nav
{ position: static;
display: none;}
li.nav {margin-bottom: 1px;}
ul.nav li, li.nav a {width: 100%;}
.show-menu {display:block;}
li.nav > ul.hidden {
display: block !important;
}
}
I don't see where you are trying to set it in the CSS you listed in your question.
I would think
ul.nav.hidden li a {
background-color: #cccccc;
}
would do it if you don't have another statement for this that counteracts it. If you do, add another class to the ul so you can make your selector specific to this instance.
If your li has padding, either drop the "a" off the selector or add "ul.nav.hidden li" as a second selector.
Btw, you have "li.nav" a few places. For this section of html, at least, your lis don't have the class "nav" but are instead inside an element with class "nav", so it should be ".nav li" if you are trying to target those. ;-)
ul li {
background-color: #cccccc;
}
Related
I am building a notched navigation, in which a triangle "cut out" is used as a marker for the active li.
I would also like to have dropdowns that reveal dropdown content on hover.
When hovering over a "current" (active) li with a dropdown, the dropdown content displays the triangle "cut out".
How do I remove the triangle "cut out" (notch) from the dropdown content of the active li?
.
Please view codepen and hover over Dropdown 2:
http://codepen.io/Goatsy/pen/pbvxKr
CSS
.nav .current a:before,
.nav .current a:after{
content:"";
display:block;
width:2em; /* Let's call this our magic number... */
height:2em; /* ...our notch will be half this size. We define it in ems to scale it up with the text size. */
position:absolute;
bottom:0;
left:50%;
margin-left:-1em; /* Half of our magic number. */
}
HTML
<li class="current">
<div class="dropdown">
<a class="dropbtn">Dropdown 2</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
.nav .current .dropdown-content a:before,
.nav .current .dropdown-content a:after { display: none; }
You have nested <a> tags in your HTML code. Your styles are set up to set all <a> tags with the :before and :after. You need to limit the styles to the first <a> tag.
Modify your code
.nav .current a:before { ... }
.nav .current a:after { ... }
with the following...
.nav .current > div > a:before { ... }
.nav .current > div > a:after { ... }
the > says only add the styles to the immediate child and nothing more.
Firstly, happy new year to you all! :)
Ok let's get to it. I have 5 items in my menu, and i would like to color "+" part of the word to red, choosing 2nd,3rd and 4th item of menu.
This is what menu looks like right now.
This is how the menu should look like, when its done.
I might have given a bad picture, but i think you can see the red "+" on 2nd,3rd and 4th item of menu.
This is what i've tried so far, but i can't seem to figure out the nth-child method.
#menu li:nth-child(2):first-letter a{color:red;}
Also tried this, but it colors every first letter in all 5 elements :S
#menu .nav > li > a:first-letter{color:red;}
Any help will be appreciated!
Thank you all!
I've managed to find the solution. Not sure if it's the best one, but im posting it below, so that any1 in the future can use it too, if no other solution is found
#menu .nav > li:nth-child(2) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(3) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(4) > a:first-letter
{
color:red;
}
Use the :not() selector to have all but one selected like this:
#menu{
background: rgb(83,83,83);
width: 100vw;
height: 40px;
}
ul{
text-align: center;
line-height: 40px;
vertical-align: central;
}
ul li{
display: inline-block;
color: white;
list-style: none;
margin-left: 25px;
}
a{
color: white;
display: block;
}
#menu ul li:not(:first-child):not(:last-child) a::first-letter{
color: red;
}
<div id="menu">
<ul>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
</ul>
</div>
I know this question already has an accepted answer, but I think there is a semantically better way of doing this. Instead of having the + symbol inside the link's markup, why not add it as a pseudo :before element? Easier to style and not dependent on your markup.
<nav>
<ul>
<li>Domov</li>
<li class="with-symbol">Naravni kamen</li>
<li class="with-symbol">Dekorativni kamen</li>
<li class="with-symbol">Keramika</li>
<li>Kontakt</li>
</ul>
</nav>
And the respective CSS:
.with-symbol:before {
content: '+';
color: red;
}
Then position it with either position: absolute; or negative left margin.
From the docs (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter): A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. So you will need to add display: block to your anchor tags.
I would also change the selector to:
ul li a:first-letter {
color:red;
}
as you need to select the first letter of the anchor tag, not the list item.
As a side note, it might be a better solution to use a span as suggested above or pseudo elements to insert the plus character and use a class to determine if it should be displayed or no.
I have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<style>
li:hover, li.active {background:black}
</style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:
li:hover ~ li.active {
background-color: #f00; /* or whatever */
}
JS Fiddle demo.
But hovering over the third li cannot affect the same li.active element.
However, the following would work:
ul:hover li.active {
background-color: transparent;
}
JS Fiddle demo.
Try this:
ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:
A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any lis
This worked for me :
.dvchange1 {
color:#fff;
}
.dvOne:hover .dvchange2 {
color:#000;
}
<div class="dvchange1 dvchange2">
<span class="">
Hello
<span>
</div>
Html markup
<ul>
<li> parent
<ul><li> child </li></ul>
</li>
</ul>
What I wanna do is to apply background only to parent li's.
ul li a{
background:url(images/nav/divider.jpg) right bottom no-repeat;
}
This style applies to all li-s, not only parent.
How can I apply css rule only to parent li-s?
Guessing from your unusual HTML:
ul li.parent a {
background:url(images/nav/divider.jpg) right bottom no-repeat;
display:block;
width:50px;
height:15px;
}
Add your own value accordingly.
You simply need the first child selector:
#foo > li{
...
}
This states "select the LI element after the #id, only".
EDIT
I should point out, you need to target the parent UL item with an ID or class.
EDIT 2 I see your updated your HTML example. Removed my nested HTML.
You have two basic choices:
Use CSS to set the style for the li elements and then override those styles for child li elements, or
Specify an id for the parent, or a parent element and then more-specifically select
1
ul li {
background-image: url(path.to/image.png);
}
ul li li {
background-image: none;
}
JS Fiddle demo.
2
<ul id="uniqueID">
<li>first-level</li>
<li>
<ul>
<li>Second-level</li>
</ul>
</li>
</ul>
and with the CSS:
#uniqueID > li {
background-image: url(path.to/background-image.png);
}
JS Fiddle demo
It's worth noting, though, that many elements are, by default or with CSS-resets, styled to have transparent backgrounds. This means that you may have to over-ride the styles of the parent li elements, regardless:
#uniqueID > li {
background-image: url(path.to/background-image.png);
}
li li {
background-image: none;
}
JS Fiddle demo
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...