Jump to content

making ul, li appear next to each other

exhaler

By exhaler
in CSS Help

 Share

Recommended Posts

exhaler Member

exhaler

Posted
Posted

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]

Link to comment
Share on other sites
rajivgonsalves Newbie

rajivgonsalves

Posted
Posted

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>

Link to comment
Share on other sites
exhaler Member

exhaler

Posted
  • Author
Posted

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]

Link to comment
Share on other sites
rajivgonsalves Newbie

rajivgonsalves

Posted
Posted

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;
}

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.