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 ... }
Related
I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block
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;
}
The following snippet is causing me a QA headache.
<div id="links-container">
<ul>
<li class="resource-link li-sep"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>»</span></li>
<li>...etc...</li>
</ul>
</div>
I tried this in CSS, but nothing is working;
#links-container ul li a { color:#C28234; }
#links-container ul li a span { font-size:140%; line-height:1em; }
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; }
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; }
#links-container ul li a:hover { color:#75450A; }
What's happening is that in Firefox, when you tab through the links, it's creating outlines around both sets of text which have close proximity to each other and are causing overlapping outlines.
Our project mgrs wish to keep the outlines to promote accessibility.
If you view it in Chrome, it will wrap the entire contents of the anchor in an outline. And we consider this to be perfect. My question is, can something be done that can replicate this in Firefox. Or at the very least, clean it up so that the outline doesn't look like dung when Firefox individually outlines each text item in the same link.
Anyone else ever have to deal with this? If so, how'd you get past it?
Thanks
Well. It's a partial solution, but can work in your case. If you you have problem with menu items only you can apply "display: inline-block;" to links in here, to make it have a common outline.
Example: jsfiddle.net/zDbsQ/2/
EDIT: Fixed link to example, original was wrong.
You can just use:
#links-container ul li a *{ outline: none; }
This will select all elements within an a and disable the outline..
i am well aware of iE6 hover probs and workarounds. what i am failing to see is how to show a li on hover in IE6? for example there is a link for support and when hovered over i would like a ul li to appear and on hover out just show initial link. any tips to get me started? many thanks
html code example
http://jsfiddle.net/zdUMG/4/
Well, for one thing, your HTML is invalid.
You need to wrap the whole thing in a ul, and you need to move the submenu ul inside the li. Like this: http://jsfiddle.net/zdUMG/2/
Then, you need some simple CSS: http://jsfiddle.net/zdUMG/3/
#nav li ul {
display: none
}
#nav li:hover ul {
display: block
}
But, that won't work in IE6.
i am well aware of iE6 hover probs and
workarounds
So, what's the problem?
Just use Whatever:hover to allow a selector like #nav li:hover ul to work in IE6.
I am trying to select the sub-menu item from a Wordpress default sidebar menu, and I am trying to write a CSS selector for that. I thought I understand CSS selectors, but I don't know what is happening in this case.
The following ones are working:
.widget_nav_menu ul .menu-item .sub-menu { background: red; }
.widget_nav_menu ul .menu-item li { background: red; }
While this one doesn't work:
.widget_nav_menu ul .menu-item li .sub-menu { background: red; }
Can someone explain to me why can I not specify things to be more precise with both specifying class and type here?
Luckily at this level of customization I don't need to select things more precisely (I only want to hide sub-menu items), but can someone tell me how to make the non-working example work?
Here is a live site, but it’s the same on all Wordpress installs with TwentyTen theme and a multi-level menu on the left.
UPDATE: I think I got a big misunderstanding about the usage of spaces in CSS, so I asked a question here: usage of spaces in CSS files
BTW, after understanding the answers and realising what was wrong with my problem, the correct answer for my problem is:
.widget_nav_menu li.menu-item ul.sub-menu
try:
.widget_nav_menu ul .menu-item .sub-menu li { background: red; }
because sub-menu class belongs to ul and there is no sub-menu class after li
I believe you want this:
.widget_nav_menu ul .menu-item li.sub-menu { background: red; }
Try this :
.widget_nav_menu ul .menu-item .sub-menu li { background: red; }
Because the li item is below the .sub-menu ul...