CODEWITHSUNDEEP
htmlcssvertical-alignment
Java Questions
Java Questions

Reputation: 7953

Menu listing vertically using css

Following is the fiddle I have created menu listing and this shows the menu horizontal but I would like to display them vertical

the fiddle contains this code : HTML

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

and the CSS

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

how do I change that?

Upvotes: 1

Views: 91

Answers (2)

Thirumalai murugan
Thirumalai murugan

Reputation: 5896

Demo

remove display:inline and padding in li and a tag text-align would solve your problem look the change 

#navcontainer ul li {padding:10px;}

#navcontainer ul li a
{
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
    width:75px;
    display:block;
    text-align:center;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240888

Simply remove display:inline, therefore causing the display to revert back to its default - block.

#navcontainer ul li {
    display: inline;
}

Updated jsFiddle here

Upvotes: 1

Related Questions