SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Problem on my css

    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.



    Code:
    .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;
    }


    Code:
    <!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. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.
    Quote Originally Posted by jemz
    how can i display my subitems to the left side
    Of the whole list or the main list item?

    3.
    Quote Originally Posted by jemz
    and also how can i put scrollbar on it if the subitems are too long.
    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.

  3. #3
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    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. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    left side of what?
    Quote Originally Posted by me
    Of the whole list or the main list item?

  5. #5
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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. #6
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code:
    <!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. #8
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    <!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>
    Hi Paul O'B,

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

  9. #9
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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. #11
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    Thank you...Great!!!...

  12. #12
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    <!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>
    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. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yes you can merge the same rules.

  14. #14
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes you can merge the same rules.
    Thank you for the reply...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •