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;
}
Related
I used a tutorial to build a responsive navigation menu which was working great here:
http://nova.umuc.edu/~ct386b09/giotto/index.html
I added a logo and some other elements and have lost the hover when the media size changes as seen here:
http://nova.umuc.edu/~ct386b09/giotto2/index.html
I have have a feeling it's somewhere here but cant tell what it might be:
HTML:
<ul class="nav hidden">
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;}`
I can post the entire HTML/CSS if needed.
The problem is that your #header and #navbar have hardcoded height values and the .nav elements, while the #menu is float:left due to the nav class it has.
You need to set height:auto for the #header and #navbar in the mobile version and also either add overflow:hidden on the #navbar or remove the float:left from the .nav.
So the actual problem was that the .full-width element was overlaid on the open menu and it was intercepting the mouse events.
There is this rule in line 81 of your CSS for width below 759px :
ul.nav {
position: static;
display: none;
}
And there is no hover rule which changes that diplay: none. So you should add this rule directly under the one above:
#navbar:hover ul.nav {
display: block;
}
Good afternoon,
I am trying to create a menu bar with a sub-nav under some parents, however the childs are not aligning.
I have change the child bicolour to red to highlight the concern.
There is a chance that by entering the sub-nav text may cure the concern.
I have listed below the CSS and HTML.
Kind regards
Gary.
Danceblast
Your problem is this:
#dropnav ul li {
margin-left: 20px;
}
It's being applied to the subnav's child li's aswell, you can target the subnav directly and set the margin to 0
#subnav li {
margin-left:0px !important;
}
OR
#dropnav #subnav li {
margin-left:0px;
}
if you dont want to use !important.
#dropnav ul li {
margin-left: 20px;
}
You want to remove the margin as well as you want to check for your text-alignment.
At the moment your elements use
text-align: center;
on all its parents and childs. You probably want that to be:
text-align: left;
Hope that helps.
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 trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.
http://jsfiddle.net/X5Dbc/
position: absolute; or somthing like that...
i have a hunch it has somthing to do with positioning
the jsfiddle above is what i have after asking about the "Dropdown" effect..
Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.
Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.
#navwrap ul li ul {
display: none;
}
#navwrap ul li:hover ul {
display: block;
position: relative;
}
Move the :hover to the parent li
You can style the two ul seperately like this:
Top level:
#navwrap > ul { your styles ... }
Sublevel:
#navwrap ul ul { your styles ... }
I have a horizontal <ul> menu. How can I fix the width of the <li> elements at, say, 250px each?
Styling the A tag can help maintain consistency and give you a little more flexibility than styling the LI tag, espeically if you end up making multi-line menu items.
ul li {
float:left;
}
ul li a {
display:block;
width:250px;
}
You should also use a CSS reset to maintain consistency between browsers.
You can do this via CSS:
ul > li { width: 250px; }
Depending on your you're doing the horizontal menu, you may need a display:block; style as well.
What Nick and Diodeus both say is right, but unless you want all of your list items to have that width, you better throw an id on that ul and then target it in your CSS.