I have all li with a hover background, but is there away instead of not:lastchild like not: id1 id4 ? Cause i want some li without that hover effect.
nav ul li.selected, nav ul li:hover, nav ul li:focus{
background-color: #0047B2;
}
Just write the ID as a specific case.
nav ul li#id4 {
background-color: none;
}
you have to give all elements you want to have a hover effect a class and just specify this class in the css file.
Related
I made a fixed navigation bar but can't seem to determine why when you hover on the "Main Menu" and then hover the sub menu, the text of "Main Menu" doesn't change color?
#nav-top > ul > li > a:hover, .nav-top-menu-button:hover {
background-color: #fff;
color: #000;
}
JSFiddle: https://jsfiddle.net/owboLy2s/1/
You can use #nav-top > ul > li:hover > a, .nav-top-menu-button:hover instead of #nav-top > ul > li > a:hover, .nav-top-menu-button:hover. So,change is :hover should be moved one step up. Otherwise, only your <a href=''>Menu</a> code will trigger color change.
li.nav-top-menu-button:hover a{
color:#000!important;
}
This should work.
It targets your main li that contains the "Menu" link. Since the drop-down menu is still inside that li you will still be hovering it when selection a sub-link. The !important just says that it takes precedence over any other styling.
I am developing a website. In the navbar the Menus are ok but the sub-menus are not working properly. All the submenus are dropping down from the first menu. And sub-menus are disappearing if cursor are not placed to the sub-menus very fast.
The site preview is here : http://ticketsbd.com/
jsfiddle link is here : Fiddle
Add this to the bottom of your stylesheet.
li.has-sub {position:relative;}
li.has-sub ul {top:17px;left:0;}
Man, if you make sub menu and menu, I recommend you for first use this css syntax:
ul > li > a{}
But not ul li a{}
Because all properties will go for all elements li and a in this parent ul.
It makes very cascading effect.
Just work with ul > li, than ul > li > a, than you can work with ul > li > ul, and so on.
It will help you do now something strange things.
For second, you should always set for parent ul and his child li next property
position: relative;
And for sub-menu ul you should always set this properties:
position: absolute;
top: 100%;
left: 0;
It is a minimum which you should know. So keep on this rules and you can styles menus as you like.
Just add display:inline-block to the following classes:
.wrap{
display:inline-block;
}
.nav_list li{
display:inline-block;
border-left: 2px ridge #3D3B3B;
}
fiddle
I am seeing two different ways of referring to the unordered lists (<ul>), list items (<li>) and anchors (<a>).
I want to set the attributes of these items in a drop down list with at least two levels of nested <ul>.
My question is specifically about the ways to refer to the different levels of <ul>, <li> and <a> there in.
I have named the navigation bar id="navBar".
I have seen on youtube: Building a drop down navigation bar
The syntax used is:
ul#navBar .sub1 li
ul#navBar .sub1 li a
Where the class ".sub1" has been defined, and is the first level of nested <ul>, and ".sub2" is the second level of nested <ul>.
Referencing these levels, the code used is.
ul#navBar .sub2 a {
background-color: blue;}
ul#navBar li:hover > a {
background-color: #CFC;
}
It seems to me, that going to the bother of defining .sub1 and .sub2 is superfluous, and I have been using the format:
#navBar ul li{ background-color: blue;}
#navBar ul li:hover ul{ background-color: red;}
REAL QUESTION:
What is the correct syntax, using my (code just above) style of formatting. To refer to a second level nested <ul> and affect the <li> or the <a> there in?
I assumed it was along the lines of:
#navBar ul li ul li: hover ul{ background-color: red;}
But I am wrong :(
First note that there should never be a space before :hover.
So the basic HTML structure you're outlining is:
<ul id="navbar">
<li>
<ul class="sub1">
<li>
<ul class="sub2">
<li><a>Text</a><li>
</ul>
</li>
</ul>
</li>
</ul>
To refer to the li and a within .sub2, you'd write:
#navbar ul ul li { style to apply to li }
#navbar ul ul li a { style to apply to a }
#navbar ul ul li:hover { style to apply to li on hover }
#navbar ul ul li:hover a { style to apply to a on li hover }
The reason the tutorial assigned classes is because using generic nested element is a really inefficient way of using CSS selectors; it's faster to use classes. For more info, see this article from CSS-Tricks.
#navnar ul
{/*some style*/} Folder
#navbar ul ul
{/*some style*/} sub-folder
#navbar ul li:hover
{/*some style*/}
#navbar ul ul li:hover
{/*some style*/}
I think this is what you're after.
check out this tutorial for more info- css3-animated-dropdown-menu
Im working on a dropdown menu, and i want my Parent <a> to "keep its color" when i move to a child <a>.
I know how i could do it by using hover on my <li> with something like:
ul#nav li:hover > a. but that wont work here, cause i only want hover on my <a>'s...
Hope you understand my problem
Heres my jsfiddle: http://jsfiddle.net/F623k/7/
Used to this
ul#nav > li:hover > a {
color: #ff7800;
}
ul#nav li ul li a:hover {
color: #ff7800;
}
Demo
My list is not display when I hover over it. For the top navigation when I hover over English it should display more languages. http://jsfiddle.net/gTdsX
You could add in your CSS to make the ul submenu be visible on mouseover of the menu item li.
#main-nav ul li:hover ul {
display:block;
}
You didn't have a :hover style for your "main-nav". Simply add this:
#main-nav ul li:hover > ul {
display:block;
}
… and it will work (tested it in your link).