CODEWITHSUNDEEP
htmlcss
Altaf Kadu
Altaf Kadu

Reputation: 13

My sub menu in css is not coming straight

This is css part, in html section which has sub menus when i click on services the sub menus are not coming exactly down its coming 2 to 3 px to right

#navigation {
 background: url(../images/bg-navigation.png) no-repeat
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
z-index:1000;
top: 0;
}

#navigation ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;}
#navigation ul li {float: left; padding:0px;}
#navigation li ul {display: none;}
#navigation ul li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #ccc;
}
#navigation ul li a:hover {background: #bebcbc;}
#navigation li:hover ul {display: block; position: absolute;}
#navigation li:hover li {float: none;}
#navigation li:hover a {background: #ffffff;}
#navigation li:hover li a:hover {background: #bebcbc;}

Upvotes: 0

Views: 29

Answers (1)

Mukul Kant
Mukul Kant

Reputation: 7122

you can try like this-

#navigation > ul {
}


*{margin: 0;padding: 0;}
    #navigation {
 background: url(../images/bg-navigation.png) no-repeat;
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
z-index:1000;
top: 0;
}

#navigation > ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;}
#navigation ul li {float: left; padding:0px;list-style: none;}
#navigation li ul {display: none;}
#navigation ul li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #ccc;
  }
#navigation ul li a:hover {background: #bebcbc;}
#navigation li:hover ul {display: block; position: absolute;}
#navigation li:hover li {float: none;}
#navigation li:hover a {background: #ffffff;}
#navigation li:hover li a:hover {background: #bebcbc;}
<div id="navigation">
    <ul>
        <li><a href="">nav</a>
        <ul>
            <li><a href="">nav</a></li>
            <li><a href="">nav</a></li>
            <li><a href="">nav</a></li>
        </ul>
        </li>
        <li><a href="">nav</a></li>
        <li><a href="">nav</a></li>
        <li><a href="">nav</a></li>
    </ul>
</div>

Hope it will helps you.

Upvotes: 1

Related Questions