We help IT Professionals succeed at work.

Margin top not workling for anchor inside li item

Rajeshbala
Rajeshbala asked
on
I am novice to front end designing..I am trying to create a horizontal navigation menu..i have the the anchor tags inside li.. when i apply margin-top to anchor tag...it is not working.

   <ul id="navigationMenu">
                <li><a href="#" class="selectedmenu">Home </a></li>
                <li><a href="#" class="normalmenu">Menu1s </a></li>
                <li><a href="#" class="normalmenu">Menu2</a></li>
            </ul>
            <!-- end navigation menu-->
        

Open in new window


CSS:
#navigationMenu li
{
    background: gray;
    display: inline-block;
    padding: 10px 50px;
    display: inline-block;
    float: left;
    border: 2px solid black;
}


#navigationMenu li a
{
 
  font-size: 20px;
  text-decoration: none;
   border: 1px solid red;
   font-weight: bold;
 margin-top: 30px;
   
}

The margin-top for anchor tag inside li is not working...whereas margin left and right are working fine..I know that we can achieve this y setting padding top of li..Since i am new i like ti know why the anchor tag margin top is not working
Comment
Watch Question

Web Architect
Commented:
you should make them inline-block ...

#navigationMenu li a
{
 
  font-size: 20px;
  text-decoration: none;
   border: 1px solid red;
   font-weight: bold;
 margin-top: 30px;
display: inline-block;
   
}

other way u could add a padding top to the li...
Rajeshbala,

Try this. Its working fine.

Just give float:left; for the class #navigationMenu li a.

Code :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#navigationMenu li
{
    background: gray;
    display: inline-block;
    padding: 10px 50px;
    display: inline-block;
    float: left;
    border: 2px solid black;
}


#navigationMenu li a
{
  float:left;
  font-size: 20px;
  text-decoration: none;
   border: 1px solid red;
   font-weight: bold;
 margin-top: 30px;
   
}
</style>
</head>

<body>
         <ul id="navigationMenu">
                <li><a href="#" class="selectedmenu">Home </a></li>
                <li><a href="#" class="normalmenu">Menu1s </a></li>
                <li><a href="#" class="normalmenu">Menu2</a></li>
            </ul>
</body>
</html>

Thanks