1. Scrolling sucks balls. Lots of people have trouble scrolling little boxes. Please try to avoid it if possible. Redundancy is good: have your top-level links actually go to a page with all the submenu links available on a normal page. Don't worry, all the young mouse-wheeling non-disabled people who are not using a touch device like a tablet will very likely not click on those and will only see your desired submenu on :hover.
2.
Of the whole list or the main list item?
3.
Your code seems to already do that. You've set a height on the divs and used the overflow property. Though you don't need an extra div for that.
Code:
<li><a href="#">about</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
...
</ul>
</li>
Start with this:
Code:
.nav, .nav ul {
list-style: none;
padding: 0;
margin: 0;
}
That'll hit all your submenus so you don't have to declare them again.
Code:
.nav > li{
float: left;
margin-right: #959597 0.1em; <--what is this?
min-width: 8em;
text-align: center;
background-color: #FFF;
border:solid 1px #959597;
}
This might be making your browsers guess at your margins. See what they do if you fix this.
Do this instead of on pseudo-states:
Code:
.nav li a {
text-decoration: none;
color: #606061;
display: block;
}
You will not want these to stop being blocks when they're being :hovered or :focussed over. Set for just "a" and all the others will inherit. Then, if you wanted a property overridden on a certain state, that's easy enough to override:
Code:
.nav li a:focus,
.nav li a:hover {
text-decoration: underline;
}
It'll still remain display: block and will keep its colour.
Your code:
Code:
.nav ul li,
.nav #scroll1div ul li,
#scroll1,#scroll2,#scroll3{
display: none;
}
I don't like the display: none/block method of showing and hiding submenus. But let's say we stick with that for now, you could do this with my div-less code above.
Code:
.nav ul {
//set all your styling code here,
// text-align: justify;color: #606061;width: 8em;any padding, etc
//and your height: 200px and overflow: auto;
//and your display: none;
}
In other words, you should be able to style the submenu ul like you did the div. Now with less HTML. Just be careful: you've set a width (8em) on the ul and overflow: auto as well. If you are getting now a new scrollbar on the bottom, you can set the widths of the .nav ul li's to be less than 8em, so they're wrap instead of setting off a scrollbar. You may also want to increase the width of subnavs from 8em to 9em because of the scrollbar.
There are some problems with this code:
Code:
.nav li:hover li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
display: block; <-- ul's, li's and divs are already blocks by default, don't need this.
text-align: justify; <-- you already mention this elsewhere, so shouldn't need here.
color: #606061; <-- all your text is in anchors, and you list different colours for submenu anchors, so what is this?
left: 100%; <-- these work only with positioned elements (position: relative/absolute)
top: 0;<--ditto
}
So we continue on using this instead:
Code:
.nav ul li {
float: none;
border: solid 1px #959597;
//maybe set a width smaller than width of .nav ul so no extra scrollbars.
}
Since your submenu anchors are also blocks, you can make sure they take up all the room and give them all the styles on hover.
Code:
.nav ul a {
color: #777;
background-color: #d2cb08;
}
.nav ul a:focus,
.nav ul a:hover {
color: #FFF;
background-color: #E56500;
}
(I'm not sure which colours you wanted when, because your code above is confusing and too many things are overriding each other. So this is only my best guess.)
Code:
.nav>li:hover ul {
display: block;
}
Ideally you want to only change the state on :hover and not any styles. You can style things who are hidden so the only CSS involved on :hover is the showing part. So here, this little bit of code should make any of your submenus appear on :hover of their parent.
If you only want some of the submenus to have scrollbars, you can give some .nav ul's a class of "scroll" and give that class the height and overflow properties.
It's usually a good idea to set widths on both your floated li's and your submenus. If you want the widths to be dependent on the width of the top li text, at least add width:auto to them.
Problem on my css
Reply With Quote
Originally Posted by jemz
Bookmarks