• 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
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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
 
I got this tall by not having enough crisco in my diet as a kid. This ad looks like it had plenty of shortening:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic