making ul, li appear next to each other

exhaler · December 17, 2009

hi,

i'm trying to make a menu with sub-menus using ul, li tags. my problem is that there are not appearing next to each other

menu code:

<ul id="infection_navigation">
<li id="infection_trigger0">
	<a href="#">
		Hospital & Clinics
	</a>

	<ul class="subNavMenuItems" id="infection_subNav0">
		<li>
			<a href="">
				Overview
			</a>
		</li>

		<li>
			<a href="">
				History
			</a>
		</li>

		<li>
			<a href="">
				News & Events
			</a>
		</li>
	</ul>
    </li>

<li id="infection_trigger1">
	<a href="#">
		Dental
	</a>

	<ul class="subNavMenuItems" id="infection_subNav1">
		<li>
			<a href="infection.php">
				Infection Control
			</a>
		</li>

		<li>
			<a href="">
				ENT
			</a>
		</li>

		<li>
			<a href="">
				Consumables
			</a>
		</li>
	</ul>		
    </li>

<li id="infection_trigger2">
	<a href="#">
		Food Industry
	</a>

	<ul class="subNavMenuItems" id="infection_subNav2">
		<li>
			<a href="">
				Laboratories Anios
			</a>
		</li>

		<li>
			<a href="">
				Jasol
			</a>
		</li>

		<li>
			<a href="">
				Neurelec
			</a>
		</li>

		<li>
			<a href="">
				Collin
			</a>
		</li>

		<li>
			<a href="">
				Diam Medical
			</a>
		</li>
	</ul>
</li>

<li id="infection_trigger3">
	<a href="#">
		Pharmaceutical
	</a>

	<ul class="subNavMenuItems" id="infection_subNav3">
		<li>
			<a href="">
				Useful Information
			</a>
		</li>

		<li>
			<a href="">
				ENT
			</a>
		</li>

		<li>
			<a href="">
				Disinfection
			</a>
		</li>
	</ul>
</li>
</ul>

CSS code:

#infection_navigation {
margin: 0;
padding: 0;
}

#infection_navigation li {
float: left;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 125px;
}

#infection_navigation li a {	
display: block;
background: #009ed8;
padding: 5px 10px 5px 10px;
text-decoration: none;
border-right: 0px solid black;
width: auto;
color: #fff;
white-space: nowrap;
}

#infection_navigation li a:hover {	
background: #80dcff;
color: #fff;
}

#infection_navigation li ul {
left: 28em;
position: absolute;
visibility: hidden;
z-index: 99;
}

#infection_navigation li ul li {	
float: none;
display: inline;
}

#infection_navigation li ul li a {	
width: auto;
background: #009ed8;
}

#infection_navigation li ul li a:hover {	
background: #80dcff;
color: #fff;
}

i'm using jquery to display the sub-menus on mover over and hide it on mouse out, (i didn't post jquery code cause its not relevant to my problem)

the image below shows what happens when i mouse over the first item (hospital & clinic), and the sub-menu appears next and below it by one item (overview, history, news & events)

thanks

[attachment deleted by admin]

Lefu · December 17, 2009

ul{

display:inline;

}

will show them aligned horizantally.

vinpkl · December 17, 2009

can you show it online

vineet

exhaler · December 17, 2009

@Lefu i tried putting it in the css but nothing happened

@vinpkl sorry i can't show it online

rajivgonsalves · December 17, 2009

you can try this I restructured a few things, and you don't require jquery to show the menus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">

<head>
  <title>test</title>
  


</head>
<style>
#infection_navigation {
   margin: 0;
   padding: 0;
}
   
#infection_navigation li {
   list-style: none;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 12px;
   width: 125px;
}
#infection_navigation li:hover ul {
    display:block;
}

#infection_navigation li a {   
   display: block;
   background: #009ed8;
   padding: 5px 10px 5px 10px;
   text-decoration: none;
   border-right: 0px solid black;
   width: auto;
   color: #fff;
   white-space: nowrap;
}

#infection_navigation li a:hover {   
   background: #80dcff;
   color: #fff;
}
   
#infection_navigation li ul {
   margin-left: 85px;
   margin-top: -25px;
   position: absolute;
   display: none;
   z-index: 99;
}

#infection_navigation li:hover ul {
   visibility: block;
}

#infection_navigation li ul li {   
   float: none;
   display: inline;
}

#infection_navigation li ul li a {   
   width: auto;
   background: #009ed8;
}

#infection_navigation li ul li a:hover {   
   background: #80dcff;
   color: #fff;
}

</style>
<ul id="infection_navigation">
   <li id="infection_trigger0">
      <a href="#">
         Hospital & Clinics
      </a>
      
      <ul class="subNavMenuItems" id="infection_subNav0">
         <li>
            <a href="">
               Overview
            </a>
         </li>
            
         <li>
            <a href="">
               History
            </a>
         </li>
         
         <li>
            <a href="">
               News & Events
            </a>
         </li>
      </ul>
    </li>

   <li id="infection_trigger1">
      <a href="#">
         Dental
      </a>
      
      <ul class="subNavMenuItems" id="infection_subNav1">
         <li>
            <a href="infection.php">
               Infection Control
            </a>
         </li>
            
         <li>
            <a href="">
               ENT
            </a>
         </li>
         
         <li>
            <a href="">
               Consumables
            </a>
         </li>
      </ul>      
    </li>

   <li id="infection_trigger2">
      <a href="#">
         Food Industry
      </a>
      
      <ul class="subNavMenuItems" id="infection_subNav2">
         <li>
            <a href="">
               Laboratories Anios
            </a>
         </li>
         
         <li>
            <a href="">
               Jasol
            </a>
         </li>
         
         <li>
            <a href="">
               Neurelec
            </a>
         </li>
         
         <li>
            <a href="">
               Collin
            </a>
         </li>
         
         <li>
            <a href="">
               Diam Medical
            </a>
         </li>
      </ul>
   </li>
   
   <li id="infection_trigger3">
      <a href="#">
         Pharmaceutical
      </a>
   
      <ul class="subNavMenuItems" id="infection_subNav3">
         <li>
            <a href="">
               Useful Information
            </a>
         </li>
         
         <li>
            <a href="">
               ENT
            </a>
         </li>
         
         <li>
            <a href="">
               Disinfection
            </a>
         </li>
      </ul>
   </li>
</ul>

</body>

exhaler · December 17, 2009

thanks a bunch rajivgonsalves, its working

exhaler · December 17, 2009

ok, i've got another problem....how i can keep the parent of the sub-menu highlighted

for instance in the image below, i want to keep hospital & clinics highlighted to show that u are viewing the sub-menu of that item

CSS code:

#infection_navigation {
margin: 0;
padding: 0;
}

#infection_navigation li {
float: left;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 125px;
}

#infection_navigation li a {	
display: block;
background: #009ed8;
padding: 5px 10px 5px 10px;
text-decoration: none;
border-right: 0px solid black;
width: auto;
color: #fff;
white-space: nowrap;
}

#infection_navigation li a:hover {	
background: #80dcff;
color: #fff;
}

#infection_navigation li ul {
position: absolute;
visibility: hidden;
margin-top: -25px;
margin-left: 85px;
z-index: 99;
}

#infection_navigation li ul li {	
float: none;
display: inline;
}

#infection_navigation li ul li a {	
width: auto;
background: #009ed8;
}

#infection_navigation li ul li a:hover {	
background: #80dcff;
color: #fff;
}

jquery code:

//Microsoft.Glimmer.OneWay
//<AnimationCollection FilePath="{x:Null}" xmlns="clr-namespace:GlimmerLib;assembly=GlimmerLib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Animation Name="OnMouseHover0" EventType="mouseover" Trigger="#trigger0"><Animation.Targets><Target Name="#infection_navigation li ul" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#subNav0" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="visible" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="OnMouseOut0" EventType="mouseout" Trigger="#trigger0"><Animation.Targets><Target Name="#subNav0" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="OnMouseHover1" EventType="mouseover" Trigger="#trigger1"><Animation.Targets><Target Name="#infection_navigation li ul" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#subNav1" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="visible" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="OnMouseOut1" EventType="mouseout" Trigger="#trigger1"><Animation.Targets><Target Name="#subNav1" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="OnMouseHover2" EventType="mouseover" Trigger="#trigger2"><Animation.Targets><Target Name="#infection_navigation li ul" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#subNav2" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="visible" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="OnMouseOut2" EventType="mouseout" Trigger="#trigger2"><Animation.Targets><Target Name="#subNav2" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="Modify CSS Effect" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});&#xD;&#xA;" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation></AnimationCollection>
jQuery(function($) {
var timer;
function OnMouseHover0(event)
{
     $("#infection_navigation li ul").css("visibility","hidden");
     $("#infection_subNav0").css("visibility","visible");
}

function OnMouseOut0(event)
{
     $("#infection_subNav0").css("visibility","hidden");
}

function OnMouseHover1(event)
{
     $("#infection_navigation li ul").css("visibility","hidden");
     $("#infection_subNav1").css("visibility","visible");
}

function OnMouseOut1(event)
{
     $("#infection_subNav1").css("visibility","hidden");
}

function OnMouseHover2(event)
{
     $("#infection_navigation li ul").css("visibility","hidden");
     $("#infection_subNav2").css("visibility","visible");
}

function OnMouseOut2(event)
{
     $("#infection_subNav2").css("visibility","hidden");
}

function OnMouseHover3(event)
{
     $("#infection_navigation li ul").css("visibility","hidden");
     $("#infection_subNav3").css("visibility","visible");
}

function OnMouseOut3(event)
{
     $("#infection_subNav3").css("visibility","hidden");
}

$('#infection_trigger0').bind('mouseover', OnMouseHover0);

$('#infection_trigger0').bind('mouseout', OnMouseOut0);

$('#infection_trigger1').bind('mouseover', OnMouseHover1);

$('#infection_trigger1').bind('mouseout', OnMouseOut1);

$('#infection_trigger2').bind('mouseover', OnMouseHover2);

$('#infection_trigger2').bind('mouseout', OnMouseOut2);

$('#infection_trigger3').bind('mouseover', OnMouseHover3);

$('#infection_trigger3').bind('mouseout', OnMouseOut3);

});

thanks

[attachment deleted by admin]

rajivgonsalves · December 17, 2009

change this

#infection_navigation li a {   
   display: block;
   background: #009ed8;
   padding: 5px 10px 5px 10px;
   text-decoration: none;
   border-right: 0px solid black;
   width: auto;
   color: #fff;
   white-space: nowrap;
}

to

#infection_navigation li a {   
   display: block;
   padding: 5px 10px 5px 10px;
   text-decoration: none;
   border-right: 0px solid black;
   width: auto;
   color: #fff;
   white-space: nowrap;
}

#infection_navigation li {
   background: #009ed8;
}

#infection_navigation li:hover {
   background: #80dcff;
   color: #fff;
}

exhaler · December 17, 2009

i can't thank u enough rajivgonsalves, how much time did it take to figure this out the first time???

Sign In

making ul, li appear next to each other

Recommended Posts

exhaler

Link to comment

Share on other sites

Lefu

Link to comment

Share on other sites

vinpkl

Link to comment

Share on other sites

exhaler

Link to comment

Share on other sites

rajivgonsalves

Link to comment

Share on other sites

exhaler

Link to comment

Share on other sites

exhaler

Link to comment

Share on other sites

rajivgonsalves

Link to comment

Share on other sites

exhaler

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information