• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Rob Spoor
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Henry Wong
  • Liutauras Vilda
  • Jeanne Boyarsky
Saloon Keepers:
  • Jesse Silverman
  • Tim Holloway
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Mikalai Zaikin
  • Piet Souris

How to add menu to middle of html page?

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is the code of the menu which i want to add in the middle

<div id="menu">

<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Babyboy.html">Baby Boy</a>
<ul>
<li><a href="Boybodysuits.html">Bodysuits</a></li>
<li><a href="Boyonepiece.html">One Piece</a></li>
<li><a href="Boyshoes.html">Shoes</a></li>
</ul>
</li>
<li><a href="Babygirl.html">Baby Girl</a>
<ul>
<li><a href="Girlbodysuits.html">Bodysuits</a></li>
<li><a href="Girlonepiece.html">One Piece</a></li>
<li><a href="Girlshoes.html">Shoes</a></li>
</ul>
</li>
<li><a href="Accessories.html">Accessories</a></li>
<li><a href="Contact_us.html">Contact Us</a></li>
</ul>

</div>

And this is the CSS code

#menu ul{
list-style:none;
margin:0px;
padding:0px;}

#menu ul li{
background-color:#404a7f;
border:1px solid white;
border-radius:10px;
margin-right:15px;
font-family:Century Gothic;
font-size:20px;
font-weight:bold;
width:120px;
height:35px;
line-height:35px;
text-align:center;
float:left;
position:relative;}

#menu ul li a{
text-decoration:none;
color:white;
display:block;}

#menu ul li a:hover{
background-color:#191d33;
border-radius:10px;}

#menu ul ul{
position:absolute;
display:none;}

#menu ul li:hover ul{
display:block;}
So I want to make this menu appear in the middle of the page horizontally but I don't know how to do this and in a simple way. Can anybody help me please?
 
Ranch Hand
Posts: 98
Angular Framework Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Hi,

Welcome to coderanch

Use the below style for #menu



Please use JSFiddle or code tag for posting your codes
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic