Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1654 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

CSS menu not working,can anyone help

Thread title: CSS menu not working,can anyone help
Closed Thread    
    Thread tools Search this thread Display Modes  
05-16-2008, 02:45 PM
#1
u12 is offline u12
Status: I'm new around here
Join date: May 2008
Location:
Expertise:
Software:
 
Posts: 3
iTrader: 0 / 0%
 

u12 is on a distinguished road

  Old  CSS menu not working,can anyone help

hey guy
can anybody help me with my drop down menu?the problem is that the drop down menu does not close.
see here
http://www.trainmesalem.com
it should show the sub menu when the main menu item is clicked or the mouse rolls over it but as you can see it remains open showing all the sub menu.
below are the CSS part and the html part.
Any help would be appreciated.thanks
here is the CCS code that i used:

/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}

ul.nav{
display: table;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}

ul.nav>li:hover{
padding-right: 1px;
}[*]

ul.nav li>ul{
/*Make the sub list items invisible*/
display: block;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}

ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}

ul.nav,
.nav ul{
border: 1px solid #369;
}

.nav a{
text-decoration: none;
}
ul.nav{
display: table;
/*Just add the following properties and values*/
width: 100%;
table-layout: closed;
}

here is the html part:
<div class='top-nav'>

<ul class='nav'>
<li><a href='/'><strong>Home</strong></a></li>
<li><a href='/'><strong>Contact</strong></a>

</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Finance</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>bankrupt</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Loan</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Consolidation</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Credit card</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Insurance</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Life insurance</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>car insurance</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>pet insurance</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>whole life insurance</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Banking</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Types of Bank</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Bank solutions</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Interest Rates</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Premium</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Banking</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Types of Bank</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Bank solutions</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Interest Rates</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Premium</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Business</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Contract</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Selling and Buying</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Interest Rates</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Premium</a></li>
</ul>
</li>

</ul>
</div>

05-16-2008, 02:47 PM
#2
Liam is offline Liam
Liam's Avatar
Status: Member
Join date: Dec 2007
Location: Liverpool, UK
Expertise:
Software:
 
Posts: 287
iTrader: 0 / 0%
 

Liam is on a distinguished road

Send a message via MSN to Liam

  Old

ul.nav li>ul{
/*Make the sub list items invisible*/
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}

05-16-2008, 03:21 PM
#3
u12 is offline u12
Status: I'm new around here
Join date: May 2008
Location:
Expertise:
Software:
 
Posts: 3
iTrader: 0 / 0%
 

u12 is on a distinguished road

  Old

thanks liam for helping me but no luck, it didn't work is replaced display:block ; with display:none; but didn't work here
do you have any more idea?

05-26-2008, 03:41 PM
#4
karmedic is offline karmedic
Status: I'm new around here
Join date: May 2008
Location: Ottawa, Ontario
Expertise:
Software:
 
Posts: 2
iTrader: 0 / 0%
 

karmedic is on a distinguished road

  Old

ul.nav, .nav ul {
border:1px solid #336699;
display:none;
}

will hide your submenus, however, you're going to have to address the sizing issues.

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed