Jump to content

Wrapping Drop Down Menu Failed


loserone+_+

Recommended Posts

lol again i having problem with drop down menu,

this time is failed to wrapping to the left of the bar,

look,

 

my objective build on myself, is to wrapping the ScrollDown1 to the left of the bar

like this,

 

and so the Next ScrollDown like ScrollDown 2, Scroll Down 3, ScrollDown 4 is wrapping until the right of the late ScrollDown. (Sorry, if my language is bad)

 

here is my html code,

<html><head><link rel="stylesheet" type="text/css" href="dropdownmenu.css"/></head><body><div id="cssmenu"><!--CSS Menu Start --><div id="dunnodiv">    <ul id="menu">    <li><a href="#" class="drop">Subdown1</a>    		<div class="dropdown_1column">                        <div class="col_1">                    <ul>                         <li><a href="#">Subdown1.1</a>						<ul>                        <li><a href="#">Subdown1.2</li>                        <li><a href="#">Subdown1.3</a></li>                        <li><a href="#">Subdown1.3</a></li>                        <li><a href="#">Subdown1.4</a></li> 						</ul>						</li>					</ul>                      </div> 		</div>	</li>       <li><a href="#" class="drop">Subdown2</a>            <div class="dropdown_5columns">                        <div class="col_1">                <ul>                    <li><a href="#">Subdown2.1</a>					<ul>                    <li><a href="#">Subdown 2.1.1</a></li>                    <li><a href="#">Subdown 2.1.2</a></li>                    <li><a href="#">Subdown 2.1.3</a></li>                    <li><a href="#">Subdown 2.1.4</a></li>					</ul>					</li>				</ul>               </div>                        <div class="col_1">                    <ul>                    <li><a href="#">Subdown2.2</a>					<ul>                    <li><a href="#">Subdown 2.1.1</a></li>                    <li><a href="#">Subdown 2.1.2</a></li>                    <li><a href="#">Subdown 2.1.3</a></li>                    </ul>					</li>                </ul>                   </div>            <div class="col_1">                    <ul>                    <li><a href="http://www.pascaistn.org/html/index.php" target="_blank">Subdown 2.3</a></li>                </ul>                   </div>         </div>        </li>    <li><a href="#" class="drop">Subdown 3</a>            <div class="dropdown_3columns">                        <div class="col_1">                    <ul>                    <li><a href="#">Subdown 3.1</a>					<ul>                    <li><a href="#">Subdown 3.1.1</a></li>                    <li><a href="#">Subdown 3.1.2</a></li>					</ul>					</li>				</ul>                   </div>                        <div class="col_1">                    <ul>	                <li><a href="#">Subdown 3.2</a>						<ul>                    	<li><a href="#">Subdown 3.2.1</a></li>                        <li><a href="#">Subdown 3.2.2</a></li>						</ul>					</li>                </ul>                   </div>        </div>            </li>		<li> <a href="#" class="drop">Subdown 4</a>    		<div class="dropdown_1column">                        <div class="col_1">                                    <ul>                        <li><a href="#">Subdown 4.1</a></li>                        <li><a href="#">Subdown 4.2</a></li>                        <li><a href="#">Subdown 4.3</a></li>                    </ul>                                        </div>     		</div>	</li>      <li><a href="#" class="drop">Subdown 5</a>    		<div class="dropdown_1column">                        <div class="col_1">                                    <ul>                        <li><a href="#">Subdown 5.1</a></li>                        <li><a href="#">Subdown 5.2</a></li>                        <li><a href="#">Subdown 5.3</a></li>                    </ul>                                </div>                		</div>        	</li></ul></div></div><!--End OF CSSMENU --></body></html>

and this is my css code,

body, ul, li {	font-size:14px; 	font-family:Arial, Helvetica, Sans-Serif;/*	line-height:21px; REMOVED BY GEOFFF */ /*	text-align:left; REMOVED BY GEOFFF */}#header{float:none; width:100%; height:100%; background-color:#FFF;}#cssmenu {	background-color:#000000; /*CHANGE THE BACKGROUND URL TO HEXA COLOR*/	padding-left: auto;	height: 40px;	width: auto;}#dunnodiv{    float:none; 	height: auto;}/*THIS IS WHERE I THINK THE PROBLEM CAN BE SOLVED*/#menu {	/*	padding:0px 20px 0px 20px; DONT USE THIS*/	list-style:none;	line-height:21px;	margin:0px auto 0px auto; 	width:100%;	padding-right: 8px;		/*THIS USED FOR WRAPPING THE RIGHT MENU SIDE*/	/* Border Radius Changer */	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;		border: 1px solid #002232;	-moz-box-shadow:inset 0px 0px 1px #edf9ff;	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;	box-shadow:inset 0px 0px 1px #edf9ff;}#menu li {	float:none;	display:inline-table;	position:relative;	padding: 0 10px 10px 5px; 	margin-right:32px;	margin-top:7px;	border:none;}#menu li:hover {/*	border:none; REMOVED BY GEOFFF*//*	background-color: #1919A3; */	background-color: red;	-moz-border-radius: 0px;	-webkit-border-radius: 0px;	border-radius: 0px;}/*THIS IS WHERE I THINK THE PROBLEM CAN BE SOLVED*/#menu li a {	font-size:12px; 	color:#CDF9FA;	display:block;	outline:0;	text-decoration:none;	text-shadow: 1px 1px 1px #000;	font-variant:normal;}#menu li .drop {/*	background:right 0px;  REMOVED BY GEOFFF*/	padding-right:21px;	z-index:2;}#menu li:hover .drop {/*	background:right 0px;  REMOVED BY GEOFFF */	z-index:2;}.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns,.dropdown_5columns {	float:none;	position:absolute;	left:-999em;	margin-top: 9.5px;	padding-top: 20px;	padding-left: 20px;/* CHANGED THE SPACE ON DROPDOWN MENU FIRST MENU *//*  padding:10px 5px 10px 5px;  *//*	border:1px solid #777777; */		background: #000000;	background: -moz-linear-gradient(top, #000000, #000000);	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#000000));	-moz-border-radius: 0px 0px 5px 5px;	-webkit-border-radius: 0px 0px 5px 5px;	border-radius: 0px 0px 5px 5px;										z-index:2;}.dropdown_1column {width: auto;   z-index:2;}.dropdown_2columns {width: auto;  z-index:2;}.dropdown_3columns {width: auto;  z-index:2;}.dropdown_4columns {width: auto;  z-index:2;}.dropdown_5columns {width: auto;  z-index:2;}#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns {	left:-1px;	top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5 {	display:inline;	float: left;	position: relative;	margin-left: 5px;	margin-right: 5px;	z-index:2;}.col_1 {width:auto; z-index:2;}.col_2 {width:auto;}.col_3 {width:auto;}.col_4 {width:auto;}.col_5 {width:auto;}#menu p, #menu h2, #menu h3, #menu ul li {	font-family:Arial, Helvetica, sans-serif;	line-height:21px;	font-size:12px;	text-align:left;	text-shadow: 1px 1px 1px #FFFFFF;}#menu h2 {	font-size:14px;	font-weight:400;	letter-spacing:-1px;	margin:7px 0 14px 0;	padding-bottom:14px;	border-bottom:1px solid #666666;}#menu h3 {	font-size:14px;	margin:7px 0 14px 0;	padding-bottom:7px;	border-bottom:1px solid #888888;}#menu p {	line-height:18px;	margin:0 0 10px 0;}#menu li:hover div a {	font-size:13px;	color:#FFFFFF;}#menu li:hover div a:hover {	color:#E4FF4A;}#menu li ul {	list-style:none;	padding:0;	margin:0 0 12px 0;}#menu li ul li {	float:none;	font-size:12px;	line-height:auto;	position:relative;	text-shadow: 1px 1px 1px #ffffff;	text-align:left;	width:130px;	padding:0;	margin:0;}#menu li ul li:hover {	background:none;	border:none;	padding:0;	margin:0;}

i think the whole problem can be solved in the menu, menu li and menu li:hover , about 2 hours i trying to change the padding or whatever is that to make wrap i failed.

Please help me to achieve my objective, any help and any advice will be appreciated :(

Link to comment
Share on other sites

this is my updated css,

and look like this still having a problem like top but many css code changed especially crap margin,

body, ul, li {	font-size:14px; 	font-family:Arial, Helvetica, Sans-Serif;/*	line-height:21px; REMOVED BY GEOFFF */ /*	text-align:left; REMOVED BY GEOFFF */}#cssmenu {	background-color:#1919A3; /*CHANGE THE BACKGROUND URL TO HEXA COLOR*/	width: auto;}#menulogo{    float: none;	height: auto;}#menu {	/*	padding:0px 20px 0px 20px; DONT USE THIS*/	padding-right:8px;	list-style:none;	line-height:37px;	margin:0;	width:100%;	/* Border Radius Changer */	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;		border: 1px solid #002232;	-moz-box-shadow:inset 0px 0px 1px #edf9ff;	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;	box-shadow:inset 0px 0px 1px #edf9ff;}#menu li  {	float:none;	display:inline-table;	position:relative;	padding-right:60px;	border:none;}#menu li:hover {	background-color: red;	-moz-border-radius: 0px;	-webkit-border-radius: 0px;	border-radius: 0px;}#menu li a {	font-size:12px;	color:#CDF9FA;	text-decoration:none;	text-shadow: 1px 1px 1px #000;}#menu li .drop {	z-index:2;	}#menu li:hover .drop {	z-index:2;}.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns,.dropdown_5columns {	float:none;	position:absolute;	left:-999em;	padding-top: 20px;	padding-left: 20px;/* CHANGED THE SPACE ON DROPDOWN MENU FIRST MENU */		background: #1919A3;	background: -moz-linear-gradient(top, #1919A3, #2E92B0);	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1919A3), to(#2E92B0));	-moz-border-radius: 0px 0px 5px 5px;	-webkit-border-radius: 0px 0px 5px 5px;	border-radius: 0px 0px 5px 5px;										z-index:2;}.dropdown_1column {width: auto;   z-index:2;}.dropdown_2columns {width: auto;  z-index:2;}.dropdown_3columns {width: auto;  z-index:2;}.dropdown_4columns {width: auto;  z-index:2;}.dropdown_5columns {width: auto;  z-index:2;}#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns {	left:0;	top:auto;}.col_1,.col_2,.col_3,.col_4,.col_5 {	display:inline;	float: none;	position: relative;	margin-left: 0;	margin-right: 0;	z-index:2;}.col_1 {width:auto; z-index:2;}.col_2 {width:auto;}.col_3 {width:auto;}.col_4 {width:auto;}.col_5 {width:auto;}#menu ul li {	font-family:Arial, Helvetica, sans-serif;	line-height:21px;	font-size:12px;	text-align:left;	text-shadow: 1px 1px 1px #FFFFFF;}#menu li:hover div a {	font-size:13px;	color:#FFFFFF;}#menu li:hover div a:hover {	color:#E4FF4A;}#menu li ul {	list-style:none;	padding:0;	font-size:12px;	position:relative;	margin:0 0 10px 0;}#menu li ul li {	float:none;	text-shadow: 1px 1px 1px #ffffff;	text-align:left;	width:200px;	padding:0;	margin:0;}#menu li ul li:hover {	background:none;	border:none;	padding:0;	margin:0;}

and this is my updated image

http://imageshack.us/photo/my-images/24/e993.jpg/

 

sorry if i using the freehosting images, because i didnt know how to add images on this reply

 

whenever its looks better and good now,

i still having the same problem in above,

 

first i think the margin was wrong,

i removed all margin and after one hour, its become like this,

but not the wrapping, and its odd to having text-align:center didnt work on the menu li

im confused in this one, and i think some of pal here know the reason and the solution.

Link to comment
Share on other sites

I think I understand what you are trying to achieve here. Take a look at this. If that is what you are looking for then just view the page's source and copy the code.

 

Also, if you don't have one yet be sure to at a DocType at the top of your code. Should be the very first line.

Link to comment
Share on other sites

Your main issue is that the <ul> tag has a default padding which is why you have 30px spacing from the left of your main menu. I set the padding to padding:0

 

Now the menu is flushed to the far right but you want spacing to left especially on hover. So the fix that you would take the <li>'s css of padding-right:60px and change it to padding: 0 30px; This will cause the parent like to be evenly spaced.

 

Hope that makes sense.

 

Also, if you search for /*edk*/ you will see my changes.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...