Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > CSS Forum > Drop down menu problem

Reply
Drop down menu problem
Old 07-24-2010, 11:24 AM Drop down menu problem
Junior Talker

Posts: 3
Trades: 0
Talkupation: sg552 is on a distinguished road
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
sg552 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 07-26-2010, 05:32 PM Re: Drop down menu problem
arungandhi005's Avatar
Novice Talker

Posts: 12
Name: arungandhi
Location: India
Trades: 0
Talkupation: arungandhi005 is on a distinguished road
Hi

I just saved this page from browser and worked out the drop down menu part. Just have a look, might it 'll be helpul for u. And i just simply applied the inline style here, but u may call it from css stylesheet.
HTML 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:130px;">
<li style="float:none; "><a href="#" style="float:none; width:140px;">Other page</a></li>
<li  style="float:none;"><a href="#"  style="float:none; width:140px;">jQuery Plugin</a></li>
<li  style="float:none;"><a href="#"  style="float:none; width:140px;">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-->
Last edited by chrishirst; 07-26-2010 at 06:17 PM..
arungandhi005 is offline
Reply With Quote
View Public Profile
 
Old 07-27-2010, 07:44 AM Re: Drop down menu problem
Kelpie's Avatar
Skilled Talker

Posts: 82
Name: Andrew
Location: SW Scotland
Trades: 0
Talkupation: Kelpie is a jewel in the roughKelpie is a jewel in the roughKelpie is a jewel in the rough
Quote:
Originally Posted by sg552 View Post
I guess the template CSS might clash with the dropdownmenu CSS.
Well, at least you can guess right

In MarketPlace.css, you define styles for #nav ul, #nav ul li and #nav ul li a
Your dropdownmenu code defines styles for #jsddm ul, #jsddm li and #jsddm li a

From the html, it's clear that these are the same list items and anchors; marketPlace.css is applying styles to the menu elements contrary to what's defined (and required, for the menu to function correctly) in DropDownMenu.css
So, how to fix:
Open MarketPlace.css and replace (in the /* Navigation */ section):
Code:
#nav ul {
    float: left;
    list-style: none;
    background: #E4E4E4 url(nav.jpg) repeat-x;    
    width: 850px;        
    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;
    float: left;
    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;
}
with:
Code:
#nav ul {
    background: #E4E4E4 url(nav.jpg) repeat-x;    
    padding: 0;
    margin: 0 0 0 30px;
    height: 45px;
    text-transform: uppercase;
}
#nav ul li a {
    padding: 0 15px;    
    color: #555;
    font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;    
    letter-spacing: 1px;
}
That removes the conflict. It would be better though if you strip the menu style definitions out of MarketPlace.css entirely and incorporate the styles you want into the definitions in DropDownMenu.css, but I'll leave that for you to do
Kelpie is offline
Reply With Quote
View Public Profile
 
Old 08-18-2010, 09:29 AM Re: Drop down menu problem
Junior Talker

Posts: 3
Trades: 0
Talkupation: sg552 is on a distinguished road
Quote:
Originally Posted by arungandhi005 View Post
Hi

I just saved this page from browser and worked out the drop down menu part. Just have a look, might it 'll be helpul for u. And i just simply applied the inline style here, but u may call it from css stylesheet.
HTML 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:130px;">
<li style="float:none; "><a href="#" style="float:none; width:140px;">Other page</a></li>
<li  style="float:none;"><a href="#"  style="float:none; width:140px;">jQuery Plugin</a></li>
<li  style="float:none;"><a href="#"  style="float:none; width:140px;">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-->
Hi Mr. Sorry for this late reply, I asking question in many forum and your answer with inline CSS works nicely From many answer I get from many forum your answer do the trick Also thanks to Kelpie for trying to help me

After some modification :
My website internal CSS (I also still use original template CSS)
HTML 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
HTML 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.
Last edited by sg552; 08-18-2010 at 09:32 AM..
sg552 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Drop down menu problem
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > CSS Forum > Drop down menu problem

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.23784 seconds with 12 queries