Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    From Horizontal to Vertical navigation menu

    How can I change my navigation from horizontal to vertical?


    Code:
    <ul id="menu">
    
    <!-- Start of Home-->
    
      <li><a href="#">Home</a></li>
        
      
      <!-- End of Home-->
    
      <!-- Start of North America-->
    
      <li><a href="#">North America</a>
        <div class="menu-container-4">
          
          <div class="column-1">
            
            <ul>
              <li><a href="#">Canada</a></li>
              <li><a href="#">United States</a></li>
            </ul>
          </div>
          <div class="column-1">
            
            <ul>
              <li><a href="#">Cuba</a></li>
            </ul>
          </div>
          <div class="column-1">
            
            <ul>
              <li><a href="#">Mexico</a></li>
            </ul>
          </div>
          <div class="column-1">
            
            <ul>
              <li><a href="#">Suriname</a></li>
            </ul>
          </div>
        </div>
      </li>
      
      <!-- End of North America-->
    
      <!--Start of Central America-->
    
      <li><a href="#">Central America</a>
        <div class="menu-container-4">
          
          <div class="column-1">
            
            <ul>
              <li><a href="#">Canada</a></li>
              <li><a href="#">United States</a></li>
            </ul>
          </div>
          <div class="column-1">
            
            <ul>
              <li><a href="#">Cuba</a></li>
            </ul>
          </div>
          <div class="column-1">
            
            <ul>
              <li><a href="#">Mexico</a></li>
            </ul>
          </div>
          <div class="column-1">
            
            <ul>
              <li><a href="#">Suriname</a></li>
            </ul>
          </div>
        </div>
      </li>
      
        <!--End of Central America-->
    Code:
    body {
    	font-family:Helvetica, verdana, arial, sans-serif;
    }
    #menu ul, #menu li {
    	line-height:22px;
    	text-align:left;
    	font-size:14px;
    }
    /* menu starts here */
    
    #menu {
    	list-style:none;
    	width:940px;
    	margin:0 auto;
    	height:45px;
    	padding:5px 30px;
    	/* rounded corners for different browser support */
        
        border-radius:5px 5px 0 0;
    	-moz-border-radius:5px 5px 0 0;
    	-webkit-border-radius:5px 5px 0 0;
    	/* css3 gradient */
        background:#333333;
    	background: -moz-linear-gradient(#444444, #111111) repeat scroll 0 0 transparent;
    	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
    	/* css3 borders */
        
        border: 1px solid #9C9C9C;
    	box-shadow:inset 0px 0px 1px #e8edf0;
    	-moz-box-shadow:inset 0px 0px 1px #e8edf0;
    	-webkit-box-shadow:inset 0px 0px 1px #e8edf0;
    }
    /* tab starts here */
    
    #menu li {
    	float:left;
    	display:block;
    	position:relative;
    	text-align:center;
    	padding:4px 10px;
    	margin:7px 30px 0 0;
    	border:none;
    }
    #menu li:hover {
    	border:1px solid #b7b7b7;
    	padding:4px 9px;
    	/*rounded corners  */
        
        border-radius:5px 5px 0 0;
    	-moz-border-radius:5px 5px 0 0;
    	-webkit-border-radius:5px 5px 0 0;
    	/* css 3 gradient */
        background:#fff;
    	background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
    	background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EDEDED));
    }
    #menu li a {
    	font-size:14px;
    	color: #999999;
    	display:block;
    	outline:0;
    	text-decoration:none;
    }
    #menu li:hover a {
    	color:#161616;
    }
    /* menu containers here  */
    
    #menu .menu-container-1,#menu .menu-container-2,#menu .menu-container-3,#menu .menu-container-4 {
    	margin:4px auto;
    	float:left;
    	position:absolute;
    	left:-999em;
    	text-align:left;
    	padding:10px 5px;
    	border:1px solid #b7b7b7;
    	border-top:none;
    	/* rounded corners */
        
        border-radius:0 5px 5px 5px;
    	-moz-border-radius:0 5px 5px 5px;
    	-webkit-border-radius:0 5px 5px 5px;
    	/* gradient */
        background:#444444;
    	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
    	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
    }
    #menu .menu-container-1 {
    	width:140px;
    }
    #menu .menu-container-2 {
    	width:280px;
    }
    #menu .menu-container-3 {
    	width:420px;
    }
    #menu .menu-container-4 {
    	width:560px;
    }
    #menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
    	top:auto;
    	left:-1px;
    }
    /* columns ici */
    
    #menu .column-1, #menu .column-2 {
    	display:inline;
    	float:left;
    	position:relative;
    	margin:0 5px;
    }
    #menu .column-1 {
    	width:130px;
    }
    #menu .column-2 {
    	width:260px;
    }
    #menu .column-3 {
    	width:390px;
    }
    #menu .column-4 {
    	width:520px;
    }
    /* right menu */
    
    #menu .menu-right {
    	float:right;
    	margin-right:0px;
    }
    #menu li .align-right {
    	/*rounded corners */
        
        border-radius:5px 0 5px 5px;
    	-moz-border-radius:5px 0 5px 5px;
    	-webkit-border-radius:5px 0 5px 5px;
    }
    #menu li:hover .align-right {
    	left:auto;
    	right:-1px;
    	top:auto;
    }
    /* menu h2, h3, p, etc.... */
    
    #menu p, #menu h2, #menu h3, #menu ul li {
    	line-height:21px;
    	font-size:12px;
    	text-align:left;
    }
    #menu p {
    	line-height:18px;
    	margin-bottom:10px;
    	color:#F2E8E8;
    }
    #menu h3, #menu h2 {
    	font-size:11px;
    	margin:7px 0 14px 0;
    	padding-bottom:5px;
    	text-transform:uppercase;
    	color: #999999;
    }
    #menu li:hover div a {
    	box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    	color: #666666;
    	font-size: 11px;
    	padding-left: 6px;
    }
    #menu li:hover div a:hover {
    	background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;
    	background:-webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));
    	color: #FAFAFA;
    	background:#04ACEC;
    }
    #menu li ul {
    	box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    	list-style:none;
    	padding:0;
    	margin-bottom:12px;
    }
    #menu li ul li {
    	float: none;
    	font-size: 12px;
    	line-height: 24px;
    	margin: 0;
    	padding: 0;
    	position: relative;
    	text-align: left;
    	width: 130px;
    }
    #menu li ul li:hover {
    	background: none;
    	border: medium none;
    	margin: 0;
    	padding: 0;
    }
    /* login here */
    
    #menu .form {
    	margin:10px 0 0 45px;
    }
    #menu input {
    	color:#e9e9e9;
    	font-size:12px;
    	outline:0 none;
    	padding:9px;
    	/* gradient */
        background:#6e6e6e;
    	background:-moz-linear-gradient(top, #888, #575757);
    	background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    	/* css3 borders */
        border:1px solid #555;
    	-moz-border-radius:10px;
    	-webkit-border-radius:10px;
    	/* css3 shadow effect */
        -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.1);
    	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
    	box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
    }
    #menu input:focus {
    	background: none repeat scroll 0 0 #313131;
    }
    #menu input:hover {
    	border-color: #000000;
    }
    #menu .submit input {
    	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
    	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
    	border-radius: 10px 10px 10px 10px;
    	box-shadow: 0 0 1px #EDF9FF inset;
    	color: #FADDDE;
    	padding: 9px;
    	width: 90px;
    }
    #menu .submit input:hover {
    	background: -moz-linear-gradient(center top, #444444, #3D3A3A) repeat scroll 0 0 transparent;
    	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#3D3A3A));
    	cursor: pointer;
    }
    #menu .submit input:active {
    	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
    	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
    	border: 1px solid #9C9C9C;
    	color: #9C9C9C;
    }
    footer {
    	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.04);
    	border: 1px solid rgba(0, 0, 0, 0.08);
    	border-radius: 5px 5px 5px 5px;
    	box-shadow: 0 3px 1px rgba(0, 0, 0, 0.02) inset, 0 1px 0 white;
    	padding: 1.5em;
    	bottom: 0;
    	display: block;
    	height: 40px;
    	left: 0;
    	position: fixed;
    	width: 100%;
    	z-index: 100000;
    }
    footer h2 {
    	color: rgba(0, 0, 0, 0.8);
        text-shadow: 0 1px 0 white;
    	font-size: 20px;
    	font-weight: normal;
    	left: 50%;
    	margin-left: -400px;
    	
    	position: absolute;
    	width: 500px;
    	text-shadow: 1px #000000;
    	font-family: 'PT Sans Narrow', Arial, sans-serif;
    }
    footer a.youhacked, a.youhacked:visited {
    	background: url("http://youhack.me/demo/Apple%20itunes%20banner%20rotator/youhack.png") no-repeat scroll right top transparent;
    	border: medium none;
    	font-size: 12px;
    	height: 70px;
    	left: 50%;
    	line-height: 31px;
    	margin: 25px 0 0 110px;
    	position: absolute;
    	text-decoration: none;
    	top: 0;
    	width: 310px;
    	color: #000000;
    	letter-spacing: 1px;
    	text-shadow: 1px #000000;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello charisma44,
    To make the menu horizontal, the li's are floated left.
    Look at the CSS for #menu li, remove the float and see what happens.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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