Link to home
Create AccountLog in
Avatar of BR
BRFlag for Türkiye

asked on

css horizontal menu alignment

Dear Experts,
I have a horizontal pure css menu.
Everything is ok for the menu except when I hover the menu the list items are aligned center. I want them to be aligned left. The top menu's text should be at the center. But what I want is when I hover the mouse over the menu, the drop down list text should be aligned on the left.
Could you please teach me how to do this?
thank you

my css code is
@charset "utf-8";
/* CSS Document */

#navMenu {
    margin:0;
    width:auto;
 }

  #navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
 }

  #navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-color: #EFEFEF;
	width:160px;
 }

  #navMenu ul li a {
	text-align:center;
	height:30px;
	width:auto;
	padding-left:6px; 
	padding-right:6px;
	display:block;
	color:#0D4B64;
	font-family:"Comic Sans MS";
	font-weight:bolder;
	text-decoration:none;
	font-size:11px;
	color:#0D4B64;
	border:1px solid #CBCBCA;
 }

  #navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
	
 }

  #navMenu ul li:hover ul {
    visibility:visible;
    z-index:9999; 
 }


  #navMenu li ul li {
width:180px;

 }

  /**********************************************/

  /*sets top level hover color*/

  #navMenu li:hover {
	background-color:#BDBCC0;
	
	 }

  /*sets link items hover color and background*/

  #navMenu ul li:hover ul li a:hover {
    color:#0D4B64;
    background:#CCC;
 }

  /* Changes text color on hover for main menu hover*/

  #navMenu a:hover {   
  color:#0D4B64;
 } 
  
 /* Contains the Float */

 .clearFloat {
    clear:both; 
    margin:0;
    padding:0;
 }

 /* IE7 Display Fix */  
 
 #navmenu ul li {

  display: inline;     
 
 }   

Open in new window


my html code is
 <div id="navMenu">

  <ul>

     <li> <a href="#">Home Page</a>
   
       <ul>

    <li><a href="#">Wet Suit</a></li>

    <li><a href="#">Vacuum Cleaner</a></li>

    <li><a href="#">Pill Box</a></li>

    <li><a href="#">Knee Socks</a></li>

    <li><a href="#">Pirate Hat</a></li>

    <li><a href="#">Kilt</a></li>

  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->
  <ul>

     <li> <a href="#">ABOUT US</a>
   
       <ul>

    <li><a href="#">Wet Suit</a></li>

    <li><a href="#">Vacuum Cleaner</a></li>

    <li><a href="#">Pill Box</a></li>

    <li><a href="#">Knee Socks</a></li>

    <li><a href="#">Pirate Hat</a></li>

    <li><a href="#">Kilt</a></li>

  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->
  <ul>

     <li> <a href="#"> Solutions FRO</a>
   
       <ul>

    <li><a href="#">Wet Suit</a></li>

    <li><a href="#">Vacuum Cleaner</a></li>

    <li><a href="#">Pill Box</a></li>

    <li><a href="#">Knee Socks</a></li>

    <li><a href="#">Pirate Hat</a></li>

    <li><a href="#">Kilt</a></li>

  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->
  <ul>

     <li> <a href="#">SERVICES</a>
   
       <ul>

    <li><a href="#">Wet Suit</a></li>

    <li><a href="#">Vacuum Cleaner</a></li>

    <li><a href="#">Pill Box</a></li>

    <li><a href="#">Knee Socks</a></li>

    <li><a href="#">Pirate Hat</a></li>

    <li><a href="#">Kilt</a></li>

  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->
  <ul>

     <li> <a href="#">Products</a>
   
  <ul>

    <li><a href="#">Wet Suit</a></li>

    <li><a href="#">Vacuum Cleaner</a></li>

    <li><a href="#">Pill Box</a></li>

    <li><a href="#">Knee Socks</a></li>

    <li><a href="#">Pirate Hat</a></li>

    <li><a href="#">Kilt</a></li>

  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->

    <br class="clearFloat" />

 
 </div>
                                  

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of yats
yats
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of BR

ASKER

you are great
thank you very much