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).
Related
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 have this CSS Menu:
http://jsfiddle.net/73GrF/
but i cannot work out what css code i need for the hover:
#nav li a:hover
trigger the hover on your li element. Don't forget to set your submenu position to absolute
#nav li:hover ul {
display:block;
}
http://jsfiddle.net/73GrF/4/ (edited fiddle with crude dropdown styling. ill leave the dressing up to you.)
http://jsfiddle.net/73GrF/5/ is what I came up with while McMastermind was at work.
The main thing I've done is taken the margins off, floated the menu headers, and made the submenus appear on hover
#nav>li {
float:left
}
#nav li:hover ul {
position:absolute;
display:block;
}
#nav li a {
margin:0;
}
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.
I have a drop down menu that when I rollover a dropdown appears. The only problem is the background images of my main list also shows as the background of the submenu list.
Below is my css to assign the tab background on rollover. But I am assuming that since tech the user is still rolling over that <li> the tab background shows on all the sub <li>
CSS:
#main_menu ul li:hover a {
background: url(images/right_tab_bg.png) top right no-repeat;
color: #578ba0;
}
#main_menu ul li:hover a span {
background: url(images/left_tab_bg.png) top left no-repeat;
}
Is there a way to tell the above css to only effect the parent <a> or <span>?
Be more specific with your selectors via direct descendant selector (I am assuming that the ul that is the top level list is a direct descendant of whatever #main_menu is):
#main_menu > ul > li:hover > a /* select only the parent li's a */
#main_menu > ul > li li a /* select any child li's a, excluding the top level li */
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