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
Related
I'm pretty happy with my dropdown menu, but there's one part which I can't get right.
It's about last menu item (Switch City), the 2nd tier of the dropdown extends the background of the 1st tier.
I made a Pen of it: https://codepen.io/pascalgarrix/pen/byNLEM
I'm pretty sure the problem in the CSS lies just before the media queries in this part:
nav ul ul ul {
position: relative;
/* has to be the same number as the "width" of "nav ul ul li" */
top: -60px;
left: 270px;
}
If anyone could have a quick look, would be awesome!
P.S. The whole menu is based on this Pen: https://codepen.io/andornagy/pen/RNeydj
You need to give the 1st level nested li a max height to prevent it from growing, but still allow overflow
nav ul li ul li:hover, nav ul li ul li ul li:hover {
background-color: rgba(0,0,0,0.2);
max-height:70px;
}
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'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.
I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?
All the site files are located here : http://dev.cuonic.com/bourree/
Index page : http://dev.cuonic.com/bourree/index.html
Stylesheet : http://dev.cuonic.com/bourree/css/style.css
Any help is appreciated, thanks :)
Here's a solution that doesn't use a fixed-width for the drop-downs.
First, add the following to the CSS for the links in the drop-downs:
#menu ul ul li a {
white-space: nowrap;
}
I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li, respectively, so that those CSS styles would apply only to the first level menu items.
Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:
http://reference.sitepoint.com/css/childselector
Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:
#menu ul ul li {
display: block;
float: left;
left: -34px;
position: relative;
width: 200px;
}
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.
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).