#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    1
    Rep Power
    0

    Centralize Ultimate Horizontal Drop-Down Menu Demo on DIV


    Please help me how to center Ultimate Horizontal Drop-Down Menu Demo on DIV

    ultimate.horizontal.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Ultimate Horizontal Drop-Down Menu Demo</title>
    <link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="css/dropdown/themes/default/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
    
    <!--[if lt IE 7]>
    <script type="text/javascript" src="js/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
    <![endif]-->
    
    </head>
    <body>
    
    <h1>Ultimate Horizontal Drop-Down Menu Demo</h1>
    
    <div id="catmenu">
    <ul id="nav" class="dropdown dropdown-horizontal">
    	<li><a href="./">Home</a></li>
    	<li><span class="dir">About Us</span>
    		<ul>
    			<li><a href="./">History</a></li>
    			<li><a href="./">Our Vision</a></li>
    			<li><span class="dir">The Team</span>
    				<ul>
    					<li><a href="./">Brigita</a></li>
    					<li><a href="./">John</a></li>
    					<li><a href="./">Michael</a></li>
    					<li><a href="./">Peter</a></li>
    					<li><a href="./">Sarah</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Clients</a></li>
    			<li><a href="./">Testimonials</a></li>
    			<li><a href="./">Press</a></li>
    			<li><a href="./">FAQs</a></li>
    		</ul>
    	</li>
    	<li><span class="dir">Services</span>
    		<ul>
    			<li><a href="./">Product Development</a></li>
    			<li><a href="./">Delivery</a></li>
    			<li><a href="./">Shop Online</a></li>
    			<li><a href="./">Support</a></li>
    			<li><a href="./">Training &amp; Consulting</a></li>
    		</ul>
    	</li>
    	<li><span class="dir">Products</span>
    		<ul>
    			<li><a href="./" class="dir">New</a>
    				<ul>
    					<li><a href="./">Corporate Use</a></li>
    					<li><a href="./">Private Use</a></li>
    				</ul>
    			</li>
    			<li><a href="./" class="dir">Used</a>
    				<ul>
    					<li><a href="./">Corporate Use</a></li>
    					<li><a href="./">Private Use</a></li>
    				</ul>
    			</li>
    			<li><a href="./">Featured</a></li>
    			<li><a href="./">Top Rated</a></li>
    			<li><a href="./">Prices</a></li>
    		</ul>
    	</li>
    	<li><a href="./">Gallery</a></li>
    	<li><a href="./">Events</a></li>
    	<li><a href="./">Careers</a></li>
    	<li><a href="./" class="dir">Contact Us</a>
    		<ul>
    			<li><a href="./">Enquiry Form</a></li>
    			<li><a href="./">Map &amp; Driving Directions</a></li>
    			<li><a href="./">Your Feedback</a></li>
    		</ul>
    	</li>
    </ul>
    </div>
    
    </body>
    </html>

    css/dropdown/dropdown.css
    Code:
    ul.dropdown,
    ul.dropdown li,
    ul.dropdown ul {
     list-style: none;
     display: block;
     /*margin: 0;
     padding: 0;*/
    }
    
    ul.dropdown {
     position: inherit;
     z-index: 597;
    /* float: left;*/
    }
    
    ul.dropdown li {
     float: left;
     line-height: 1.3em;
     vertical-align: middle;
     zoom: 1;
     text-align:left;
    }
    
    ul.dropdown li.hover,
    ul.dropdown li:hover {
     position: relative;
     z-index: 599;
     cursor: default;
    }
    
    ul.dropdown ul {
     visibility: hidden;
     position: absolute;
     top: 100%;
    /* left: 0;*/
     z-index: 598;
     width: 100%;
    }
    
    ul.dropdown ul li {
     float: none;
    }
    
    ul.dropdown ul ul {
     top: 1px;
     left: 99%;
    }
    
    ul.dropdown li:hover > ul {
     visibility: visible;
    }

    css/dropdown/themes/default/default.ultimate.css
    Code:
    #catmenu{
     text-align:center;
     width:100%;
     background:#f6f6f6;
     border-style: solid;
     border-width: 1px 1px 1px 0;
     border-color: #fff #d9d9d9 #d9d9d9;
     height: 34px;
     top: 0;
     right: 0;
     margin: 0;
     padding: 0;
    }
    
    
    
    ul.dropdown {
     font-weight: bold;
    }
    
    	ul.dropdown li {
    	 padding: 7px 10px;
    	 border-style: solid;
    	 border-width: 1px 1px 1px 0;
    	 border-color: #fff #d9d9d9 #d9d9d9;
    	 background-color: #f6f6f6;
    	 color: #000;
    	}
    
    	ul.dropdown li.hover,
    	ul.dropdown li:hover {
    	 background-color: #eee;
    	 color: #000;
    	}
    
    	ul.dropdown a:link,
    	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
    	ul.dropdown a:hover		{ color: #000; }
    	ul.dropdown a:active	{ color: #ffa500; }
    
    
    	/* -- level mark -- */
    
    	ul.dropdown ul {
    	 width: 150px;
    	 margin-top: 1px;
    	}
    
    		ul.dropdown ul li {
    		 font-weight: normal;
    		}
    
    
    
    /*-------------------------------------------------/
     * @section		Support Class `dir`
     * @level sep	ul, .class
     */
    
    
    ul.dropdown *.dir {
     padding-right: 20px;
     background-image: url(images/nav-arrow-down.png);
     background-position: 100% 50%;
     background-repeat: no-repeat;
    }
    
    
    /* -- Components override -- */
    
    ul.dropdown-horizontal ul *.dir {
     padding-right: 15px;
     background-image: url(images/nav-arrow-right.png);
     background-position: 100% 50%;
     background-repeat: no-repeat;
    }
    
    ul.dropdown-upward *.dir {
     background-image: url(images/nav-arrow-top.png);
    }
    
    ul.dropdown-vertical *.dir,
    ul.dropdown-upward ul *.dir {
     background-image: url(images/nav-arrow-right.png);
    }
    
    ul.dropdown-vertical-rtl *.dir {
     padding-right: 10px;
     padding-left: 15px;
     background-image: url(images/nav-arrow-left.png);
     background-position: 0 50%;
    }
    css/dropdown/themes/default/default.css
    Code:
    #catmenu{
     text-align:center;
     width:100%;
     background:#f6f6f6;
     border-style: solid;
     border-width: 1px 1px 1px 0;
     border-color: #fff #d9d9d9 #d9d9d9;
     height: 34px;
     top: 0;
     right: 0;
     margin: 0;
     padding: 0;
    }
    
    
    
    ul.dropdown {
     font-weight: bold;
    }
    
    	ul.dropdown li {
    	 padding: 7px 10px;
    	 border-style: solid;
    	 border-width: 1px 1px 1px 0;
    	 border-color: #fff #d9d9d9 #d9d9d9;
    	 background-color: #f6f6f6;
    	 color: #000;
    	}
    
    	ul.dropdown li.hover,
    	ul.dropdown li:hover {
    	 background-color: #eee;
    	 color: #000;
    	}
    
    	ul.dropdown a:link,
    	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
    	ul.dropdown a:hover		{ color: #000; }
    	ul.dropdown a:active	{ color: #ffa500; }
    
    
    	/* -- level mark -- */
    
    	ul.dropdown ul {
    	 width: 150px;
    	 margin-top: 1px;
    	}
    
    		ul.dropdown ul li {
    		 font-weight: normal;
    		}
    
    
    
    /*-------------------------------------------------/
     * @section		Support Class `dir`
     * @level sep	ul, .class
     */
    
    
    ul.dropdown *.dir {
     padding-right: 20px;
     background-image: url(images/nav-arrow-down.png);
     background-position: 100% 50%;
     background-repeat: no-repeat;
    }
    
    
    /* -- Components override -- */
    
    ul.dropdown-horizontal ul *.dir {
     padding-right: 15px;
     background-image: url(images/nav-arrow-right.png);
     background-position: 100% 50%;
     background-repeat: no-repeat;
    }
    
    ul.dropdown-upward *.dir {
     background-image: url(images/nav-arrow-top.png);
    }
    
    ul.dropdown-vertical *.dir,
    ul.dropdown-upward ul *.dir {
     background-image: url(images/nav-arrow-right.png);
    }
    
    ul.dropdown-vertical-rtl *.dir {
     padding-right: 10px;
     padding-left: 15px;
     background-image: url(images/nav-arrow-left.png);
     background-position: 0 50%;
    }
    Thank you.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    18
    Rep Power
    0
    You can center your menu, with only this two steps:

    1.) File: "defaul.ultimate.css". Selector: "ul.dropdown". Add prop: "text-align: center;"
    2.) File: "dropdown.css". Selector: "ul.dropdown li". Remove prop: "float: left;". Add prop: "display: inline;"

    Make these modifications with bluePen Editor, and you can see, how each property is influencing the page! This way you can learn a lot, by actually seeing, what you are doing.

IMN logo majestic logo threadwatch logo seochat tools logo