Drop down menu problem

**sg552** · 07-24-2010, 03:05 PM

Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else.

This is the original html template
http://www.styleshout.com/templates/...e11/index.html

This is my website with drop down menu added but it's not working
http://ghazifly.110mb.com/marketplace11/

I guess the template CSS might clash with the dropdownmenu CSS.

My index.html navigation code, I think theres nothing wrong with this code.

PHP Code:


    <!-- navigation starts-->

<div id="nav">

<div class="c1">

<ul id="jsddm">

<li><a href="index.html">Home</a></li>

<li><a href="#">Drop Down Menu</a>

<ul>

<li><a href="#">Other page</a></li>

<li><a href="#">jQuery Plugin</a></li>

<li><a href="#">Ajax Navigation</a></li>

</ul>

</li>

    <!-- navigation ends-->

My website CSS top navigation code:

PHP Code:


/* Navigation */

#nav {

    clear: both;    

    padding: 0;            

}

#nav ul {

    float: left;

    list-style: none;

    background: #E4E4E4 url(nav.jpg) repeat-x;    

    

    padding: 0;    margin: 0 0 0 30px;

    height: 45px;

    display: inline;

    text-transform: uppercase;

}

#nav ul li {

    display: inline;

    margin: 0; padding: 0;

}

#nav ul li a {

    display: block;



    width: auto;

    margin: 0;

    padding: 0 15px;    

    border-right: 1px solid #dadada;

    border-left: 1px solid #fafafa;    

    border-bottom: none;

    color: #555;

    font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;

    text-transform: uppercase;

    text-decoration: none;    

    letter-spacing: 1px;

}

#nav ul li a:hover, 

#nav ul li a:active {

    color: #326ea1;

}

#nav ul li#current a {    

    background: #DBDBDB url(nav-current.jpg) repeat-x;        

}

My dropdownmenu CSS code:

PHP Code:


/* menu styles */

#jsddm

{    margin: 0;

    padding: 0}



    #jsddm li

    {    float: left;

        list-style: none;

        font: 12px Tahoma, Arial}



    #jsddm li a

    {    display: block;

        background: #324143;

        padding: 5px 12px;

        text-decoration: none;

        border-right: 1px solid white;

        width: 70px;

        color: #EAFFED;

        white-space: nowrap}



    #jsddm li a:hover

    {    background: #24313C}

        

        #jsddm li ul

        {    margin: 0;

            padding: 0;

            position: absolute;

            visibility: hidden;

            border-top: 1px solid white}

        

            #jsddm li ul li

            {    float: none;

                display: inline}

            

            #jsddm li ul li a

            {    width: auto;

                background: #A9C251;

                color: #24313C}

            

            #jsddm li ul li a:hover

            {    background: #8EA344}

I get the drop down menu code from here: http://javascript-array.com/scripts/...rop_down_menu/

Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working,

So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated.

Thanks in advance

**azoomer** · 07-25-2010, 08:27 PM

in the css for
#nav ul
there is
width:850px;
Try to outcomment that like this
/* width:850px; */
or you could delete it for now.

Next you want to find
#nav ul li a

where you see :

float: left;

Try to outcomment it or delete the float:left it is interfering with the function of the menu and preventing the drop down from working.

If you take away these two things the drop down will work, but there is more work to be done before it will be perfect. But I suggest you start by removing the above

Compared to the css you have posted above there are some differences in what you have on the page right now, so you are obviously still trying to change this and that. The changes I am suggesting are related to the css that I find on your page at this moment in time. I hope you read this before changing it further, otherwise my suggestions might not work.

I thought i'd give you a copy of the main css I have on my computer now, I think this works okay, as a start anyway.

Code:

/* -------------------------------------------------

AUTHOR          :  	Deleted for discretion
WEBSITE         :  
TEMPLATE NAME   
TEMPLATE CODE   : 	
VERSION         :   
DATE            :   

--------------------------------------------------- */

/* ------------------------------------------------
   HTML ELEMENTS
--------------------------------------------------- */

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }

body {
	background: #fff;
	font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
	color: #666666; 
	text-align: center;
	margin: 0 0 15px 0;	
}

/* links */
a, a:visited {	
	color: #326ea1; 
	background: inherit;
	text-decoration: none;		
}


/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;
	font-weight: Bold; 	
	color: #333;		
}
h1 {
	font-size: 160%;	
	font-weight: normal;
}
h2 {
	font-size: 130%;
	text-transform: uppercase;	
}
h3 {
	font-size: 130%;	
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}

/* images */
img {
	background: #FAFAFA;
    border: 1px solid #DCDCDC;
	padding: 8px;
}
img.float-right {
  	margin: 5px 0px 10px 10px;  
}
img.float-left {
  	margin: 5px 10px 10px 0px;
}

code {
  	margin: 5px 0;
  	padding: 10px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  	/* white-space: pre; */
  	background: #F5F5F5;
	border-left: 3px solid #D4D4D4;
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
	font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;	
	margin: 10px;
 	padding: 0 0 0 25px;  
   background: #F5F5F5;
	border-left: 3px solid #D4D4D4;	
	color: #444;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px;	
}
th strong {
	color: #fff;
}
th {
	background: #e7e6e6 url(button.jpg) repeat-x;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;	
	text-align: left;
	border-left: 1px solid #f4f4f4;
	border-bottom: solid 2px #fff;
	color: #333;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;		
}
/* end - table */

/* form elements */
form {
	margin:10px; padding: 0 5px;
	background: #F5F5F5;	
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	font: bold 12px Arial, Sans-serif; 
	height: 24px;
	margin: 0;
	padding: 2px 3px; 
	color: #333;
	background: #e7e6e6 url(button.jpg) repeat-x;
	border: 1px solid #dadada;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0 5px 0 10px; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 100px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button { 
	width: 60px;
	height: 24px;
	padding: 2px 5px;
	vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	position: relative;
	width: 910px;	
	margin: 0 auto;
	text-align: left;
	background: #fff url(content.jpg) repeat-y center top;
}
#content-wrap {
	float: left;
	width: 850px;
	margin-left: 30px;
	display: inline;
	padding: 0; 	
	border-top: 5px solid #fff;
	background: #fff url(content-wrap.jpg) repeat-x; 
}
#header {
	position: relative;
	background: #fff url(header-bg.jpg) repeat-y center top;
	height: 35px;
	width:910px;	
	padding: 0;	
	color: #fff;	
}

/* header links */
#header #header-links {
	position: absolute;
	top: 8px; right: 45px;	
	color: #838181;
	font-size: 10px;	
	font-weight: bold;
}
#header #header-links p {	
	padding: 0;	margin: 0;	
}
#header #header-links a {	
	color: #838181;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #444;		
}

/* header-photo */
#header-photo {
	position: relative;
	clear: both;
	margin: 5px auto;
	height: 250px;
	width: 850px;
	background: #fff url(header-photo.jpg) no-repeat center center;
}
#header-photo h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 48px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -1px;
	color: #fff;
	text-transform: none;
	text-decoration: none;
	border: none;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 25px; left: 30px;	
}

#header-photo h2#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 14px 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #B6D1F8;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 80px; left: 35px;		
}

/* Navigation */
#nav {
	clear: both;	
	padding: 0;
	width:850px;
	height:45px;
	margin-left:30px;
	background: #E4E4E4 url(nav.jpg) repeat-x;
}
#nav ul {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 45px;
	display: inline;
	text-transform: uppercase;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	display: block;
	width: auto;
	margin: 0;
	padding: 0 15px;	
	border-right: 1px solid #dadada;
	border-left: 1px solid #fafafa;	
	border-bottom: none;
	color: #555;
	font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #326ea1;
}
#nav ul li#current a {	
	background: #DBDBDB url(nav-current.jpg) repeat-x;		
}

/* Main Column */
.three-col #main {
	margin: 10px 190px 0 200px;
}
.two-col #main {
	margin: 10px 5px 0 200px;
}

#main h1 {
	margin: 10px 10px 0 10px;
	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
	color: #444;
	padding: 15px 0 2px 0px; 		
	border-bottom: 1px solid #dadada;
}

/* Sidebar */	
#sidebar {
	float: left;
	width: 195px;	
	margin-top: 10px;	
}	
/* right column */
#rightcolumn {
	float: right;
	width: 190px;
	margin-top: 10px;	
}
#rightcolumn h1, #sidebar h1 {
	margin: 10px 5px 0 5px;
	padding: 5px 5px; 
	font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #444; 		
}

/* sidemenu */
ul.sidemenu {
	text-align: left;
	margin: 7px 8px 8px 10px; padding: 0;			
	border-top: 1px solid #E5E5E5;
	text-decoration: none;	
}
ul.sidemenu li {
	list-style: none;
	padding: 4px 0 4px 5px;
	margin: 0 2px;		
	border-bottom: 1px solid #E5E5E5;
}
* html body ul.sidemenu li {
	height: 1%;
}
ul.sidemenu li a {
	text-decoration: none;	
	color: #326ea1; 
	border: none;		
}
ul.sidemenu li a:hover {	
	color: #383d44;
	border: none;
}

/* footer-wrap */
#footer-wrap {
	clear: both;
	width: 910px;
	font-size: 95%;
	padding: 20px 0;
	text-align: left;	
	background: url(footer-bottom.jpg) no-repeat center bottom;	
}
#footer-wrap a {
	text-decoration: none;
	color: #666666;
	font-weight: bold;
}
#footer-wrap a:hover {
	color: #000;	
}
#footer-wrap p {
	padding: 10px 0;
}
#footer-wrap h2 {
	color: #666666;
	margin: 0;
	padding: 0 10px; 
}

/* footer */
#footer {
	clear: both;
	color: #666;	
	margin: 0 auto 10px auto; 
	width: 850px;
	padding: 5px 0;
	text-align: center;
	background: #F8F7F7;
	border-top: 1px solid #F2F2F2;	
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }

/* post */
.post-by {
	font-size: .95em;	
	padding-top: 0;
}
.post-footer {
	background: #F5F5F5;
	padding: 5px; margin: 20px 10px 0 10px;	
	font-size: 95%;	
	color: #666666;	
}
.post-footer .date{
	margin: 0 10px 0 5px;	
}
.post-footer a.comments {
	margin: 0 10px 0 5px;	
}
.post-footer a.readmore {
	margin: 0 10px 0 5px;	
}

**sg552** · 08-17-2010, 07:16 PM

Sorry for this late reply. I found help from other forum and decide to go with inline CSS.

source : http://www.webmaster-talk.com/1051440-post2.html

After some modification :
My website internal CSS (I also still use original template CSS)

PHP Code:


<style type="text/css">

/* menu styles */

#jsddm

{ margin: 0;

padding: 0}



#jsddm li

{ float: left;

list-style: none;

font: 12px Tahoma, Arial}



#jsddm li a:hover

{ background: #DBDBDB}



#jsddm li ul

{ margin: 0;

padding: 0;

position: absolute;

visibility: hidden;

border-top: 1px solid white}



#jsddm li ul li

{ float: none;

display: inline}



#jsddm li ul li a

{ width: auto;

background: #E4E4E4; /*LIGHT-GREEN*/

color: #666666}



#jsddm li ul li a:hover

{ background: #DBDBDB}

</style>

Inline CSS navigation

PHP Code:


<!-- navigation starts-->

<div id="nav">

<div class="c1">

<ul id="jsddm">

<li><a href="http://ghazifly.110mb.com/marketplace11/index.html">Home</a></li>

<li><a href="#">Drop Down Menu</a>

<ul style="visibility: hidden; margin-top:45px; width:120px; left:108px;">

<li style="float:none; "><a href="http://www.google.com" style="float:none; width:145px;">Sejarah Sekolah</a></li>

<li  style="float:none;"><a href="#"  style="float:none; width:145px;">Lokasi Sekolah</a></li>

<li  style="float:none;"><a href="#"  style="float:none; width:145px;">Ajax Navigation</a></li>

</ul>

</li>

<li><a href="http://ghazifly.110mb.com/marketplace11/index.html">Archives</a></li>

<li><a href="http://ghazifly.110mb.com/marketplace11/index.html">About</a></li>

</ul>

</div>

<!-- navigation ends-->

    </div>

thanks for your time Mr.

Thread: Drop down menu problem

Thread Tools

Search Thread

Drop down menu problem

The Following User Says Thank You to azoomer For This Useful Post:

Resolved

Bookmarks

Bookmarks

Posting Permissions