Problem on my css

HTML & CSS
1

Hi, Can you help me please, how can i display my subitems to the left side and also how can i put scrollbar on it if the subitems are too long.

More help will be greatly appreciated.


.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li a:first-letter{
 text-transform: uppercase;

}

.nav > li{
   float: left;
   margin-right: #959597 0.1em;
   min-width: 8em;
   text-align: center;
   background-color: #FFF;
   border:solid 1px #959597;
}

.nav li a:link,
.nav li a:visited{
  text-decoration: none;
  color: #606061;
  display: block;
}

.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;

}

 .nav ul li,
 .nav #scroll1div ul li,
 #scroll1,#scroll2,#scroll3{
  display: none;
}

.nav li:hover  li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
  display: block;
  text-align: justify;
  color: #606061;
}

.nav ul li{
  border: solid 1px #959597;
}

.nav ul li:hover, .nav li:hover,
.nav li:hover li a:hover, .nav li:hover a
{
  color: #FFF;
  background-color: #E56500;
}

.nav li:hover li a{
  color: #777777;
  background-color: #d2cb08;
}

.nav li:hover  li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
    display: block;
    text-align: justify;
    color: #606061;
    left: 100%;
    top: 0;
}




<!Doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />

 <link rel="stylesheet" href="menu2.css" style="text/css">

</head>

 <body>
    <ul class="nav">
       <li><a href="#">home</a>
			<ul>
				<li><a href="#">how</a></li>
				<li><a href="#">where</a></li>
				<li><a href="#">when</a></li>
			</ul>
		</li>
	   <li><a href="#">about</a>
          <div style="overflow:auto;height:200px;" id="scroll1">
               <ul>
                   <li><a href="#">A</a></li>
                   <li><a href="#">B</a></li>
                   <li><a href="#">C</a></li>
                   <li><a href="#">D</a></li>
                   <li><a href="#">E</a></li>
                   <li><a href="#">F</a></li>
                   <li><a href="#">G</a></li>
                   <li><a href="#">H</a></li>
                   <li><a href="#">I</a></li>
                   <li><a href="#">J</a></li>
                   <li><a href="#">L</a></li>
                   <li><a href="#">M</a></li>
                   <li><a href="#">N</a></li>
                   <li><a href="#">O</a></li>
                   <li><a href="#">P</a></li>
                   <li><a href="#">Q</a></li>
               </ul>
          </div>
       </li>

	    <li><a href="#">when</a></li>


	   <li><a href="#">services</a>
	      <ul>
			  <li><a href="#">Web Design</a></li>
			  <li><a href="#">Internet Marketing</a></li>
			  <li><a href="#">Hosting</a>
                  <div style="overflow:auto;height:200px;" id="scroll2">
                      <ul>
                          <li><a href="#">A</a></li>
                          <li><a href="#">B</a></li>
                          <li><a href="#">C</a></li>
                          <li><a href="#">D</a></li>
                          <li><a href="#">subitems</a>
                              <div style="overflow:auto;height:200px;" id="scroll3">
                                  <ul>
                                      <li><a href="#">A</a></li>
                                      <li><a href="#">B</a></li>
                                      <li><a href="#">C</a></li>
                                      <li><a href="#">D</a></li>
                                      <li><a href="#">E</a></li>
                                      <li><a href="#">F</a></li>
                                      <li><a href="#">G</a></li>
                                      <li><a href="#">H</a></li>
                                      <li><a href="#">I</a></li>
                                      <li><a href="#">J</a></li>
                                      <li><a href="#">L</a></li>
                                      <li><a href="#">M</a></li>
                                      <li><a href="#">N</a></li>
                                      <li><a href="#">O</a></li>
                                      <li><a href="#">P</a></li>
                                      <li><a href="#">Q</a></li>
                                  </ul>
                              </div>



                          </li>
                          <li><a href="#">F</a></li>
                          <li><a href="#">G</a></li>
                          <li><a href="#">H</a></li>
                          <li><a href="#">I</a></li>
                          <li><a href="#">J</a></li>
                          <li><a href="#">L</a></li>
                          <li><a href="#">M</a></li>
                          <li><a href="#">N</a></li>
                          <li><a href="#">O</a></li>
                          <li><a href="#">P</a></li>
                          <li><a href="#">Q</a></li>
                      </ul>
                  </div>
              </li>
			  <li><a href="#">Domain Names</a></li>
			  <li><a href="#">Broadband</a></li>
		  </ul>
	   </li>

    </ul>	

 </body>
</html>
2

  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.

Of the whole list or the main list item?

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.


<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:


.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.


.nav > li{
   float: left;
   [b]margin-right: #959597 0.1em;[/b] <--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:


.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:


.nav li a:focus,
.nav li a:hover {
  text-decoration: underline;
}

It’ll still remain display: block and will keep its colour.

Your 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.


.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:


.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:


.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.


.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.)


.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.

3

Hi, thank you for the reply and correcting my codes,but i could not see how can i make the subitems to be display in left side.

Best Regards,

4

left side of what?

5

Hi, thank you for the reply,i am confuse which one am i going to tell,i want that under the <li>subitems</li> and <li>Hosting</li>will be floated left,…

Thank you in advance.


<li><a href="#">services</a>
	      <ul>
			  <li><a href="#">Web Design</a></li>
			  <li><a href="#">Internet Marketing</a></li>
			  <li><a href="#">Hosting</a>
                  <div style="overflow:auto;height:200px;" id="scroll2">
                      <ul>
                          <li><a href="#">A</a></li>
                          <li><a href="#">B</a></li>
                          <li><a href="#">C</a></li>
                          <li><a href="#">D</a></li>
                          <li><a href="#">subitems</a>
                              <div style="overflow:auto;height:200px;" id="scroll3">
                                  <ul>
                                      <li><a href="#">A</a></li>
                                      <li><a href="#">B</a></li>
                                      <li><a href="#">C</a></li>
                                      <li><a href="#">D</a></li>
                                      <li><a href="#">E</a></li>
                                      <li><a href="#">F</a></li>
                                      <li><a href="#">G</a></li>
                                      <li><a href="#">H</a></li>
                                      <li><a href="#">I</a></li>
                                      <li><a href="#">J</a></li>
                                      <li><a href="#">L</a></li>
                                      <li><a href="#">M</a></li>
                                      <li><a href="#">N</a></li>
                                      <li><a href="#">O</a></li>
                                      <li><a href="#">P</a></li>
                                      <li><a href="#">Q</a></li>
                                  </ul>
                              </div>
6

Hi! Stomme poes,

I don’t like the display: none/block method of showing and hiding submenus.

what is the other way in showing the submenus.?

7

Hi,

You can move the sumbenus out of the way using a negative left margin (margin-left:-999em) or left position and then just broing them back using margin-left:0 (or left:0).

If you are trying to get the submenus to flyout to the left then you need to remove the scroll because nothing can escape from a positioned scroll element.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav, .nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.nav li a:first-letter { text-transform: uppercase; }
.nav li {
	float: left;
	text-align: center;
}
.nav li { position:relative }
.nav li a, .nav li a:visited {
	text-decoration: none;
	color: #606061;
	float:left;
	background-color: #FFF;
	border:1px solid #959597;
	min-width: 8em;
}
.nav li ul {
	position:absolute;
	top:100%;
	left:0;
	margin-left:-999em;
	width:100%;
	text-align: justify;
}
.nav li ul li, .nav li ul a {
	float:none;
	display:block
}
.nav li:hover ul { margin-left:0; }
.nav li:hover ul ul { margin-left:-999em }
.nav li li:hover ul {
	margin-left:0;
	top:0
}
.nav li li:hover ul ul { margin-left:-999em; }
.nav li li:hover li:hover ul { margin-left:0; }
.nav li ul.reverse { left:-100% }
.nav li:hover > a {
	color: #FFF;
	background-color: #E56500;
}
.nav li li a {
	color: #777777;
	background-color: #d2cb08;
}
</style>
</head>

<body>
<ul class="nav">
		<li><a href="#">home</a>
				<ul>
						<li><a href="#">how</a></li>
						<li><a href="#">where</a></li>
						<li><a href="#">when</a></li>
				</ul>
		</li>
		<li><a href="#">about</a>
				<ul>
						<li><a href="#">A</a></li>
						<li><a href="#">B</a></li>
						<li><a href="#">C</a></li>
						<li><a href="#">D</a></li>
						<li><a href="#">E</a></li>
						<li><a href="#">F</a></li>
						<li><a href="#">G</a></li>
						<li><a href="#">H</a></li>
						<li><a href="#">I</a></li>
						<li><a href="#">J</a></li>
						<li><a href="#">L</a></li>
						<li><a href="#">M</a></li>
						<li><a href="#">N</a></li>
						<li><a href="#">O</a></li>
						<li><a href="#">P</a></li>
						<li><a href="#">Q</a></li>
				</ul>
		</li>
		<li><a href="#">when</a></li>
		<li><a href="#">services</a>
				<ul>
						<li><a href="#">Web Design</a></li>
						<li><a href="#">Internet Marketing</a></li>
						<li><a href="#">Hosting</a>
								<ul class="reverse">
										<li><a href="#">A</a></li>
										<li><a href="#">B</a></li>
										<li><a href="#">C</a></li>
										<li><a href="#">D</a></li>
										<li><a href="#">subitems</a>
												<ul class="reverse">
														<li><a href="#">A</a></li>
														<li><a href="#">B</a></li>
														<li><a href="#">C</a></li>
														<li><a href="#">D</a></li>
														<li><a href="#">E</a></li>
														<li><a href="#">F</a></li>
														<li><a href="#">G</a></li>
														<li><a href="#">H</a></li>
														<li><a href="#">I</a></li>
														<li><a href="#">J</a></li>
														<li><a href="#">L</a></li>
														<li><a href="#">M</a></li>
														<li><a href="#">N</a></li>
														<li><a href="#">O</a></li>
														<li><a href="#">P</a></li>
														<li><a href="#">Q</a></li>
												</ul>
										</li>
										<li><a href="#">F</a></li>
										<li><a href="#">G</a></li>
										<li><a href="#">H</a></li>
										<li><a href="#">I</a></li>
										<li><a href="#">J</a></li>
										<li><a href="#">L</a></li>
										<li><a href="#">M</a></li>
										<li><a href="#">N</a></li>
										<li><a href="#">O</a></li>
										<li><a href="#">P</a></li>
										<li><a href="#">Q</a></li>
								</ul>
						</li>
						<li><a href="#">Domain Names</a></li>
						<li><a href="#">Broadband</a></li>
				</ul>
		</li>
</ul>
</body>
</html>
8

Hi Paul O’B,

Thank you for this,and for explaining about the scroll…Thank you so much.

9

Hi can i ask about this code,why is it you put position with the absolute value?can you enlighten my mind what is the purpose on this.?

.nav li ul {
position:absolute;
top:100%;
left:0;
margin-left:-999em;
width:100%;
text-align: justify;
}

Thank you in advance. : D

10

Two reasons for the position: absolute;

  1. Position: absolute and position: relative let you set coordinates like top: something; or left: something; If you set things like top and left on any regular, non-positioned elements, they will be ignored by the browser.

  2. Position: absolute elements are taken out of the flow of the document. Meaning, for one thing, they don’t take up space. If you had the submenus position: relative and then set off-screen with left: -999em, the submenus would not be seen because they are offscreen (what you want), but the next element coming after your menu will be pushed down by the submenus. That is, you’ll have a gap between your menu and the next element after your menu. With position: absolute on the submenus, the next element after your menu will act as if there is only the main menu on the page, and will sit right underneath it.

11

Thank you…Great!!!..

12

hi can i ask on this

.nav li {
float: left;
text-align: center;
}
.nav li { position:relative }

is it okay to merge this, like this

.nav li {
float: left;
text-align: center;
position:relative
}

13

Yes you can merge the same rules.:slight_smile:

14

Thank you for the reply…