How i can divide Vertically Navigation in two

HTML & CSS
1

Respected Friends!

i have small problem ! attaching reference image of psd

766×700 570 KB

I have problem in Top header!

if you can looked into 2nd section navigation ,
Specials, create an account
Search customer login
Contact us

i wanted to make same like, i have problem, i unable to divide into two, if i do, its mess up :frowning:
what will be margin etc
kindly help me, how i can do this easily.

i have done this code! correct me

<div id="header_top_link">

                <ul>
                     <li><a href="#">Specials</a></li>
                     <li><a href="#">Search</a></li>
                       <li><a href="#">Conatct Us</a></li>  
                        <li><a href="#">Create an account</a></li>
                        <li><a href="#">Customer Login</a></li>
                     </ul>

                 </div>

 /* Start of Header Top 2nd Section */	

 #header_top_link
 		{
 			width:310px;
 			margin-left:38;
 			margin-top:20px;
 			float:left;

 		}

 #header_top_link > ul
 		{
 			margin-left:11px;
			font-size:11px;
 			float:left;
		}

#header_top_link li
		{
 			background-image:url(../images/checkbox_item.png);
 			background-repeat:no-repeat;
 			background-position:left center;
 			padding-left:12px; 
 			line-height:10px;
 			height:20px;
 			float:left;

 		}

 #header_top_link li:first-of-type
 {
 	margin-left:120px; !important;
 }

 #header_top_link a
 {
 	color:#ffffff;
 }
 /* End of Header Top 2nd Section */

thanks

2

Hope I understand your question. Use a width you that can’t allow 3, but 2 in a row for the LI's or you can put the groups in seperate UL with 45% width at least for each. see this example in jsFiddle

3

thanks i fixed it

4

hi sir

can you help me on 3rd as well, how it can be done as well ! http://prntscr.com/87xx8m
and http://prntscr.com/87xxfx (9px gap between 1st section and 2nd )

thanks

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.