Click here to Skip to main content
15,877,915 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
In the following code I am unable to use 'display:inline' exactly as what it has to do.
All the text in all the five li's under ul id'sbmenu'are overlapping and not appearing as a single line.

CSS
#submenu li ul
{
 display:none;
}
#submenu li
{
 top:22px;
  left:314px;
 position:absolute;
display:inline;
width:300px;
}



XML
<div id="header">
<h1>Vasan heights</h1>
<ul id="submenu"  class="submenu">
<li class="sbmenu"> Home </li>
<li class="sbmenu"> About us </li>
<li class="sbmenu">Projects

     <ul>
                <li><a href="#">Completed</a></li>
                <li><a href="#">On going</a></li>
                <li><a href="#">About to start</a></li>
                <li><a href="#">Photo Gallery</a></li>
            </ul>

            </li>

<li class="sbmenu">Contact Us</li>
<li class="sbmenu">Mail us</li>
</ul>

</div> <%--header--%>
Posted

Hi,

Just change your css to this:
CSS
#submenu li
{
 top:22px;
 left:314px;
 position:inherit;
 display:inline;
 width:300px;
}


Check these links on how to use position:
http://www.w3schools.com/css/css_positioning.asp[^]
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/[^]

Regards,
Praneet
 
Share this answer
 
Comments
S.Rajendran from Coimbatore 21-Nov-14 8:58am    
Now when I changed position:inherit it works fine but it is not appearing within the 'header' div. It is appearing outside that 'header' div. My header div code as follows:
#header {
top:0px;
margin:0px;
padding:0px;
background-color:Gray;
color:white;
height:51px;
position :fixed;
text-align:left;
padding:5px;
width:1012px;
}

#header h1
{
margin-top:-2px;
color:Yellow;
font-size:xx-large;
}
Hi,
Your #header has height defined as 51px. Either remove it or adjust it.
First try removing it and see how it looks and what type of look and feel you want.
See, you are applying the class to parent div, hence you will have to look at it first.
By adjusting this, your menu and submenu will come under it.

Regards,
Praneet
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900