5 Replies - 1051 Views - Last Post: 02 September 2013 - 09:32 AM

#1 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Navigtion menu

Posted 31 August 2013 - 09:52 PM

Why did I edit my code? It was working, but I got ocd in the css because I thought not all classes were utilized. Now guess what? BOOM! And yes, I should have backed up my original file:)

Either way, I hate these menus because I never get them working on the first shot. This one was working so I prefer to keep this code (in the working state). Can anyone please tell me what needs fixed as the links are still showing despite the class given to the parent elements are inline. The links should be displayed block. (I think this is what it is called), and when you hover, that is when the submenu comes up.
THanks!

  <ul class="nav">
             		<li><a href="index.php">Home</a>
	                <li><a href="#" class="li.nav_last" >Around the World</li>
                  
	                        <ul >
	                           <li><a href="unique.php" class="ul.sub_men_ul">Unique</a></li>
	                            <li><a href="ny.php" class="ul.sub_men_ul" >NY</a></li>
	                            
						</ul>
	                     </ul>  



css:
.nav { 
	position:absolute; 
	display:inline; 
	font-size:12px; 
	} 
	 
	.nav li { 
	 display:block;
	 position:relative;
	float:left; 
	line-height:120%; 
	
	}
	 
	.nav li.nav_last { 
	border-right:none; 
	} 
	.nav a { 
	display:block; 
	padding:0 5px; 
	color:#FFF; 
	} 
		.nav a.sub_menu_flyout { 
		width:15px; 
		margin-left:-5px; 
		height:13px; 
		margin-top:1px; 
		 } 
			.nav a.shp_crt { 
			height:15px; 
			margin-left:5px; 
			padding-left:20px; 
			 }
				ul. {  
				display:none; 
				position:absolute; 
				padding:10px 5px; 
				width:125px; top:14px; 
				left:0; 
				 }
				
				 	
				 .nav li:hover > ul.sub_men_ul { 
				 display:block; 
				 } 
				

	.nav li:hover > a { color:#C00; 
	} 
		.nav li:hover > a.sub_menu_flyout { 
		 } 
			.sub_men_flt { 
			float:left; 
			} 
	 
	ul.sub_men_ul li { 
	
	 float:none;
	border:0; 
	line-height:120%; 
	} 
	
	ul.sub_men_ul li a { 
	color:#FFF; 
	padding-left:10px; 
	 } 
		ul.sub_men_ul li a:hover { 
		
		color:#C00;
		 }
		 



Is This A Good Question/Topic? 0
  • +

Replies To: Navigtion menu

#2 DblAAssassin  Icon User is offline

  • D.I.C Regular

Reputation: 32
  • View blog
  • Posts: 253
  • Joined: 11-May 13

Re: Navigtion menu

Posted 01 September 2013 - 08:59 AM

I think your looking for inline-block, so try changing all your block in your css to that. I don't really understand your question from what you put, but I think that is what your looking for. I apologize if it is not, if not could you elaborate a little more.
.nav { 
    position:absolute; 
    display:inline; 
    font-size:12px; 
} 
	 
.nav li { 
    display:inline-block;
    position:relative;
    float:left; 
    line-height:120%; 
}
	 
.nav li.nav_last { 
    border-right:none; 
} 

.nav a { 
    display:inline-block; 
    padding:0 5px; 
    color:#FFF; 
} 

.nav a.sub_menu_flyout { 
    width:15px; 
    margin-left:-5px; 
    height:13px; 
    margin-top:1px; 
} 

.nav a.shp_crt { 
    height:15px; 
    margin-left:5px; 
    padding-left:20px; 
}

ul. {  
    display:none; 
    position:absolute; 
    padding:10px 5px; 
    width:125px; top:14px; 
    left:0; 
}
				
.nav li:hover > ul.sub_men_ul { 
    display: inline-block; 
} 
				

.nav li:hover > a { 
    color:#C00; 
} 

.nav li:hover > a.sub_menu_flyout { 
} 

.sub_men_flt { 
    float:left; 
} 
	 
ul.sub_men_ul li { 
    float:none;
    border:0; 
    line-height:120%; 
} 
	
ul.sub_men_ul li a { 
    color:#FFF; 
    padding-left:10px; 
} 
		
ul.sub_men_ul li a:hover { 
    color:#C00;
}


Edited to the parameters I mentioned above. I also noticed on line 50 of your css, there is nothing inside those curly braces. What's that?

This post has been edited by DblAAssassin: 01 September 2013 - 09:01 AM

Was This Post Helpful? 0
  • +
  • -

#3 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: Navigtion menu

Posted 02 September 2013 - 06:45 AM

This code?
.nav li:hover > a {
51 color:#C00;
52 }

That has only the color thats it. What do you mean there's nothing there? That it doesn't do anything special except color?

Also the inline-block still gives it the same effect.
When you hover over NY, for example, you are supposed to have 2 links show up below it. WHen the mouse goes away the links disappear. Right now, the two links are showing up side by side underneath the NY top menu item.
Was This Post Helpful? 0
  • +
  • -

#4 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: Navigtion menu

Posted 02 September 2013 - 07:37 AM

Ok, I got it working:) Dropbox actually did have a backup all the way from July that i used. Voila!
"smacks hands for editing code and almost breaking everything forever"
Thanks
Was This Post Helpful? 0
  • +
  • -

#5 DblAAssassin  Icon User is offline

  • D.I.C Regular

Reputation: 32
  • View blog
  • Posts: 253
  • Joined: 11-May 13

Re: Navigtion menu

Posted 02 September 2013 - 09:28 AM

View Postcodespook, on 02 September 2013 - 06:45 AM, said:

This code?
.nav li:hover > a {
51 color:#C00;
52 }

That has only the color thats it. What do you mean there's nothing there? That it doesn't do anything special except color?

Also the inline-block still gives it the same effect.
When you hover over NY, for example, you are supposed to have 2 links show up below it. WHen the mouse goes away the links disappear. Right now, the two links are showing up side by side underneath the NY top menu item.


I meant this code, which is on line 50!
.nav li:hover > a.sub_menu_flyout {
         }


Anyways, glad you got it working!
Was This Post Helpful? 0
  • +
  • -

#6 Ryano121  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1362
  • Posts: 3,002
  • Joined: 30-January 11

Re: Navigtion menu

Posted 02 September 2013 - 09:32 AM

View Postcodespook, on 02 September 2013 - 03:37 PM, said:

Dropbox actually did have a backup all the way from July that i used. Voila!
"smacks hands for editing code and almost breaking everything forever"


Two words: Version control

You're welcome :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1