Aligning The Submenu dropdown to the left

**Rabbit** · Mar 5 '13, 05:27 PM

Please post the code.

**Mo7aMeD74** · Mar 5 '13, 06:11 PM

Here is the Submenu's Code

Code:

/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
	background:#252525;
	box-shadow:0 1px 4px rgba(0,0,0,0.5);
}

#wsite-menus .wsite-menu li a {
	color: #fff;
	margin:0;
	border:none;
	background: #252525 url(nav-submenu-bg.png) repeat-x center top;
}

#wsite-menus .wsite-menu li a:hover {
	color: #fff;
	background: #2e2e2e url(nav-submenu-bg.png) repeat-x center top;
}

**Rabbit** · Mar 5 '13, 07:33 PM

And the HTML that goes with that CSS?

**Mo7aMeD74** · Mar 5 '13, 07:35 PM

Here it is

Code:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>

<body class='no-header-page wsite-theme-light'>

    <div id="nav-wrap">
        <div class="container">
        	{menu}
        </div><!-- end container -->
    </div><!-- end nav-wrap -->
	<br>
	<br>
	<br>
	

		<div id="header-wrap">
			<div class="container">
				<table id="header">
					<tr>
						<td id="logo">{logo}</td>
						<td id="header-right">
							<table>
								<tr>
									<td class="phone-number">{phone:text}</td>
									<td class="social">{social}</td>
									<td class="search">{search}</td>
								</tr>
							</table>
							<div class="clear"></div>
						</td>
					</tr>
				</table>
			</div><!-- end container -->
		</div><!-- end header-wrap --> 

    <div id="banner-wrap">
        <div class="container">
            <div id="banner">
            
                <div style="clear:both;"></div>
            
            </div><!-- end banner -->
        </div><!-- end container -->
    </div><!-- end banner-wrap -->

    <div id="main-wrap">
        <div class="container">
   			{content}
        </div><!-- end container -->
    </div><!-- end main-wrap -->

    <div id="footer-wrap">
        <div class="container">
       		{footer}
        </div><!-- end container -->
    </div><!-- end footer-wrap -->
</body>

</html>

**Rabbit** · Mar 5 '13, 09:43 PM

I see none of the classes or ids that you used in your CSS anywhere in the HTML you posted.

**Mo7aMeD74** · Mar 6 '13, 05:22 PM

I Took it off that's the Default HTML Code

**Rabbit** · Mar 6 '13, 09:07 PM

Well there's nothing I can do if the CSS doesn't match the HTML.

Your question is about how to modify the CSS so that the HTML looks correct. If you don't give me the correct CSS and the correct HTML, there's nothing I can do for you.

**Mo7aMeD74** · Mar 6 '13, 09:40 PM

That's The correct HTML .. and her's the FULL CSS :

Code:



/* Resets
--------------------------------------------------------------------------------*/

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, 
fieldset, input {
	margin: 0;
	padding: 0;
}

a img {
	border: 0;
}

a {
	text-decoration: none;
}

/* General Styling and Structure
--------------------------------------------------------------------------------*/

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	background: url(nav-bg.jpg);
}

.container {
	margin: 0 auto;
	width: 960px;	
}

#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap
{
        width:100%;
}
a {
	color: #359bdc;
}

a:hover {
	color: #77c7fa;
}

blockquote {padding:0 0 0 20px !important; color:#999 !important;}
#footer-wrap blockquote {border-left-color:#777;}
h2 {
	font-size: 22px;
	padding: .5em 0 .2em 0;
	line-height: 1.2;
	font-family: 'Tahoma', sans-serif;
	font-weight: bold;
	color: #333;
}

p {
	line-height: 1.5;
	padding: 1em 0;
	font-family: Tahoma;
	font-weight: bold;
}

div#content {min-height:400px;}

/* Header
--------------------------------------------------------------------------------*/

#header-wrap  {
	padding:30px 0;
	background:#fff;
	position:relative;
	z-index:2;
	box-shadow:0 1px 2px 1px rgba(0,0,0,0.05);
}

#logo,
#logo a,
#logo a:hover {
    color: #353535;
	text-decoration: none;
	font-size: 36px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	letter-spacing:1px;
}


#header {
	border-collapse: collapse;
	border-spacing: 0;
        width:100%;
}


#header td {
	vertical-align: middle;
	text-align: left;
}


#header-right table {
	float: right;
	width: 1px;
}

#header-right td {
	padding: 0;
}

/* Header: Phone Number
--------------------------------------------------------------------------------*/

#header-right .phone-number .wsite-text {
	display: block;
	white-space: nowrap;
}

#header-right .phone-number .wsite-text a {}
#header-right .phone-number .wsite-text a:hover {}

/* Header: Social Links
--------------------------------------------------------------------------------*/

#header-right .wsite-social {
	vertical-align: middle;
	margin: 2px 0 0 10px;
}


.wsite-social-item {
	width: 28px;
	height: 30px;
	margin: 1px 0 0 4px;
}

.wsite-social-rss {
	background: url(social-icons.png) no-repeat -130px 0px;
}

.wsite-social-rss:hover {
	background-position: -130px -30px;
}

.wsite-social-rss:active {
	background-position: -130px -60px;
}

.wsite-social-linkedin {
	background: url(social-icons.png) no-repeat -65px 0px;
}

.wsite-social-linkedin:hover {
	background-position: -65px -30px;
}

.wsite-social-linkedin:active {
	background-position: -65px -60px;
}

.wsite-social-facebook {
	background: url(social-icons.png) no-repeat 0px 0px;
}

.wsite-social-facebook:hover {
	background-position: 0px -30px;
}

.wsite-social-facebook:active {
	background-position: 0px -60px;
}

.wsite-social-twitter {
	background: url(social-icons.png) no-repeat -32px 0px;
}

.wsite-social-twitter:hover {
	background-position: -32px -30px;
}

.wsite-social-twitter:active {
	background-position: -32px -60px;
}

.wsite-social-mail {
	background: url(social-icons.png) no-repeat -97px 0px;
}

.wsite-social-mail:hover {
	background-position: -97px -30px;
}

.wsite-social-mail:active {
	background-position: -97px -60px;
}

.wsite-social-pinterest {
	background: url(social-icons.png) no-repeat -227px 0px;
}

.wsite-social-pinterest:hover {
	background-position: -227px -30px;
}

.wsite-social-pinterest:active {
	background-position: -227px -60px;
}

.wsite-social-youtube {
	background: url(social-icons.png) no-repeat -325px 0px;
}

.wsite-social-youtube:hover {
	background-position: -325px -30px;
}

.wsite-social-youtube:active {
	background-position: -325px -60px;
}

.wsite-social-plus {
	background: url(social-icons.png) no-repeat -195px 0px;
}

.wsite-social-plus:hover {
	background-position: -195px -30px;
}

.wsite-social-plus:active {
	background-position: -195px -60px;
}

.wsite-social-flickr {
	background: url(social-icons.png) no-repeat -162px 0px;
}

.wsite-social-flickr:hover {
	background-position: -162px -30px;
}

.wsite-social-flickr:active {
	background-position: -162px -60px;
}

.wsite-social-vimeo {
	background: url(social-icons.png) no-repeat -260px 0px;
}

.wsite-social-vimeo:hover {
	background-position: -260px -30px;
}

.wsite-social-vimeo:active {
	background-position: -260px -60px;
}

.wsite-social-yahoo {
	background: url(social-icons.png) no-repeat -292px 0px;
}

.wsite-social-yahoo:hover {
	background-position: -292px -30px;
}

.wsite-social-yahoo:active {
	background-position: -292px -60px;
}
/* Header: Search Box
--------------------------------------------------------------------------------*/

#header-right .wsite-search {
	vertical-align: middle;
	margin-left:15px;
}

#header-right .wsite-search-input {
	width: 153px;
	height: 28px;
	border: 0;
	font-family: 'Open Sans', sans-serif;
	color: #999999;
	font-size: 12px;
	background: url(input-bg.png) no-repeat center left;
}

#header-right .wsite-search-button {
	position: relative;
	width: 21px;
	height: 28px;
	padding: 4px 0px;
	background: url(submit-bg.png) no-repeat center right;
}

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap {
	background: url(nav-bg.jpg);
	box-shadow:0 1px 2px 1px rgba(0,0,0,0.25);
	position:fixed;
	z-index:3;
}

#nav-wrap .container {
	clear: both;
	overflow: hidden;
	position: relative;
	width: 960px;
	box-shadow:none;
}

#nav-wrap .container ul {
	list-style: none;
	float: left;
}

#nav-wrap .container ul li {
	list-style: none;
	float: left;
	background: url(nav-sep.png) repeat-y center right;
	padding-right: 2px;
}

#nav-wrap .container ul li.wsite-nav-0 {
	padding-left:1px;
}

#nav-wrap .container ul {
	background: url(nav-sep.png) repeat-y center left;
}

#nav-wrap .container ul li a {
	display: block;
	font-family: Tahoma , sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing:0px;
	color: #fff;
	padding: 25px 20px;
	border: 0;
	outline: 0;
	list-style-type: none;
	text-shadow:0 -1px 1px rgba(0,0,0,1);
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
	background: #252525;
	border: 0;
}

#nav-wrap .container ul li a:active {
	background: #000;
}

/* Navigation Submenu's
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
	background:#252525;
	box-shadow:0 1px 4px rgba(0,0,0,0.5);
}

#wsite-menus .wsite-menu li a {
	color: #fff;
	margin:0;
	border:none;
	background: #252525 url(nav-submenu-bg.png) repeat-x center top;
}

#wsite-menus .wsite-menu li a:hover {
	color: #fff;
	background: #2e2e2e url(nav-submenu-bg.png) repeat-x center top;
}

/* Universal banner
--------------------------------------------------------------------------------*/

#banner-wrap {
	background:url(banner-bg.jpg);
	border-bottom: 1px solid #DEDEDE;
}

#banner-wrap .container {
	width:960px;
	position: relative;
	z-index:1;
}

/* Page type: Tall header
--------------------------------------------------------------------------------*/

.tall-header-page #banner {
	background: url(banner-tall-bg.png) repeat center left;
	width: 960px;
	height: 380px;
}

.tall-header-page .wsite-header {
	width: 960px;
	height: 380px;
	background: url(banner-tall.jpg) no-repeat;
}

/* Page type: Short header
--------------------------------------------------------------------------------*/

.short-header-page #banner {
	background: url(banner-short-bg.png) no-repeat center left;
	width: 960px;
	height: 251px;
}

.short-header-page .wsite-header {
	width: 960px;
	height: 251px;
	background: url(banner-short.jpg) no-repeat;
}

/* Page type: No header
--------------------------------------------------------------------------------*/

.no-header-page .wsite-header  {
        display:none;
}

/* Page type: Landing page
--------------------------------------------------------------------------------*/

.landing-page #banner {
	background: url(banner-landing-bg.png) no-repeat center left;
	width: 960px;
	height: 381px;
	padding: 0;
}
.landing-page .wsite-header {
	width: 960px;
	height: 381px;
	background: url(banner-landing.jpg) no-repeat;
	position: relative;
}

#bannerright {
	background: url(banner-landing-text-bg.png) repeat center left;
	position: absolute;
	bottom:0px;
	margin-left:30px;
	padding: 25px 30px 20px;
}

#bannerright h2 {
	width:400px;
	color: #fff;
	font-size: 30px;
	font-weight:400;
	text-shadow:0 1px 2px rgba(0,0,0,1);
	padding: 0px;
	line-height: 30px;
}

#bannerright p {
	width:500px;
	color: #fff;
	font-size: 14px;
	padding: 20px 0px;
	line-height: 140%;
	text-shadow:0 1px 2px rgba(0,0,0,1);
}

.landing-banner-outer {
	display: table; 
	#position: relative; 
	overflow: hidden;
}

.landing-banner-mid {
	#position: absolute; 
	#top: 50%;
	display: table-cell; 
	vertical-align: middle;
}

.landing-banner-inner {
	#position: relative; 
	#top: -50%;
}

/* Main Content
--------------------------------------------------------------------------------*/
#main-wrap {
	background:#fff;
	padding:20px 0;
}
#main-wrap .container {
	background: #fff;
	padding: 10px 0px;
}
#main-wrap .container p {}
#main-wrap .container a {}
#main-wrap .container blockquote {
	font-size:13px;
	font-style:italic;
	padding: 1px 30px 50px 30px;
}

#main-wrap .container form .wsite-button {
	margin-top:20px;
}


/* Footer
--------------------------------------------------------------------------------*/

#footer-wrap {
	text-align:right;
	background:url(nav-bg.jpg);
	color:#ddd;
	padding:30px 0;
}

#footer-wrap h1, #footer-wrap h2 {color:#fff; font-size:19px;}
#footer-wrap span, #footer-wrap p, #footer-wrap .wsite-form-label {color:#bbb;}
#footer-wrap a {color:#fff !important;}
#footer-wrap a:hover {color:#888 !important;}

#footer-wrap .container .wsite-footer {
    margin: 0 10px;
}
#footer-wrap .wsite-form-container {
	text-align:left;
	margin-top:0 !important;
}

/* Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-label {
	display: inline-block;
	color: #2c2c2c;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	margin:15px 0px 5px;
}

.form-radio-container {
	color: #666666;
	font-size: 13px;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}

.wsite-form-input, .wsite-search-element-input {
	border:1px solid #bbb;
	background: #fff;
	padding:8px 5px !important;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 1px #ececec;    
    box-shadow: inset 0px 1px 1px #ececec;
}

.form-select {
	color: #888888;
	font-size: 13px;
	padding: 2px 0px 2px 5px;
	width: 300px;
	-webkit-box-shadow: inset 0px 0px 1px 1px #ececec;    
    box-shadow: inset 0px 0px 1px 1px #ececec;
	border-radius: 5px;
}

#footer-wrap .wsite-form-container {margin-top:0 !important;}

.wsite-search-box {position:relative; width:inherit; overflow:visible;}
.wsite-search-box span {background:url(search-light.png) left; width:13px; height:13px; position:absolute; top:5px; right:-10px;}
.wsite-search-box span:hover {cursor:pointer; background-position:center;}
.wsite-search-box span:active {background-position:right;}

/* Buttons
--------------------------------------------------------------------------------*/

/* Small structure & regular style */

.wsite-button {
	height: 47px;
	display: inline-block;
	padding: 0px 26px 0px 0px;
	background: url(button_highlight.png) no-repeat 100% -144px;
}

#banner .wsite-button, #footer-wrap .wsite-button {
	background-image: url(button_highlight_dark.png);
}

.wsite-button:hover {
	background-position: 100% -192px;
}

.wsite-button:active {
	background-position: 100% -240px;
}

.wsite-button-inner {
	color: #fff !important;
    height: 47px;
	line-height: 45px;
	display: block;
	font-size: 14px;
	font-weight: bold;
	padding: 0px 0px 0px 26px;
	background: url(button_highlight.png) no-repeat 0px 0px;
	text-shadow:0 -1px 0 rgba(0,0,0,0.6);
}

#banner .wsite-button-inner, #footer-wrap .wsite-button-inner {
	background-image: url(button_highlight_dark.png);
}

.wsite-button:hover .wsite-button-inner {
	background-position: 0px -48px;
}

.wsite-button:active .wsite-button-inner {
	background-position: 0px -96px;
}

/* Large structure & regular style  */

.wsite-button-large {
	color: #fff !important;
	height: 66px;
	background: url(button_large_highlight.png) no-repeat 100% -200px;
	padding: 0px 30px 0px 0px;
}

#banner .wsite-button-large, #footer-wrap .wsite-button-large {
	background-image: url(button_large_highlight_dark.png);
}

.wsite-button-large:hover {
	background-position: 100% -266px;
}

.wsite-button-large:active {
	background-position: 100% -332px;
}

.wsite-button-large .wsite-button-inner {
	height: 66px;
	line-height: 64px;
	padding: 0px 0px 0px 30px;
	background: url(button_large_highlight.png) no-repeat 0px 0px;
}

#banner .wsite-button-large .wsite-button-inner, #footer-wrap .wsite-button-large .wsite-button-inner {
	background-image: url(button_large_highlight_dark.png);
}

.wsite-button-large:hover .wsite-button-inner {
	background-position: 0px -66px;
}

.wsite-button-large:active .wsite-button-inner {
	background-position: 0px -132px;
}

/* Highlighted styles */

.wsite-button-highlight {
	background-image: url(button_blue.png);
}

.wsite-button-highlight .wsite-button-inner {
	background-image: url(button_blue.png);
}

.wsite-button-large.wsite-button-highlight {
	background-image: url(button_large_blue.png);
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
	background-image: url(button_large_blue.png);
}

#banner .wsite-button-highlight, #footer-wrap .wsite-button-highlight {
	background-image: url(button_blue_dark.png);
}

#banner .wsite-button-highlight .wsite-button-inner, #footer-wrap .wsite-button-highlight .wsite-button-inner {
	background-image: url(button_blue_dark.png);
}

#banner .wsite-button-large.wsite-button-highlight, #footer-wrap .wsite-button-large.wsite-button-highlight {
	background-image: url(button_large_blue_dark.png);
}

#banner .wsite-button-large.wsite-button-highlight .wsite-button-inner, #footer-wrap .wsite-button-large.wsite-button-highlight .wsite-button-inner {
	background-image: url(button_large_blue_dark.png);
}

Will That Help ?

**Rabbit** · Mar 6 '13, 10:36 PM

If that's the correct HTML, I don't see where your submenu drop down is in the code.

**Mo7aMeD74** · Mar 6 '13, 10:41 PM

Yes that's the correct one ,and all what i want to do is aligning the submenu to the left side instead of the right .. :/

**Rabbit** · Mar 7 '13, 05:01 PM

But I don't see a submenu, which lines of code in your HTML composes the submenu?

**Mo7aMeD74** · Mar 7 '13, 09:00 PM

There is no lines of the submenu in The HTML , it's working just Like that ..

**Rabbit** · Mar 8 '13, 02:51 AM

I'm confused... you said the you want to align the submenu. But then you say there is no submenu. So at this point I have no idea what you're asking.

**Mo7aMeD74** · Mar 8 '13, 01:03 PM

is that impossible from the css ?

Aligning The Submenu dropdown to the left

Aligning The Submenu dropdown to the left

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment