PDA

View Full Version : Menu Centered While Using Submenus



ccmovies
Dec 28th, 2010, 03:59 AM
Hello, I am making a website that requires a submenu. The only thing is I am fairly new to submenus and don't know how to make the main ul centered by text-align and still have the submenus work. I found a tutorial online for a left-aligned menu but I don't know how to convert it. Here is the CSS code:



#menu-top {
background: #363636 url(images/menu-top-bg.png) repeat-x;
border: 1px solid #333333;
text-align: center;
height: 40px;
position: relative;
}

#menu-top li {
background: url(images/menu-top-border.png) no-repeat;
line-height: 40px;
position: relative;
list-style: none;
display: block;
cursor: pointer;
float: left;
}

#menu-top li:first-child {background: none;}

#menu-top li a {
color: #FFFFFF;
text-decoration: none;
padding: 10px 6px 10px 10px;
text-shadow: 0px 0px 2px #000000;
}

#menu-top li:hover ul {display: block;}

#menu-top ul { /* drop down menu */
position: absolute;
display: none;
background: #1786E0;
border: 1px solid #006B97;
margin-top: 14px;
}

#menu-top ul li { /* drop down menu li's */
float: none;
border-bottom: 1px solid #006B97;
padding: 5px 5px 5px 10px;
width: 170px;
margin: 0;
}

#menu-top ul li:last-child {border-bottom: none;}


The HTML is your standard UL with an ID of menu-top and the submenu wrapped in a li with the class submenu. Thanks anyone who can help out!

Excavator
Dec 28th, 2010, 04:19 AM
Hello ccmovies,
The CSS alone is not enough. Can you post the markup for the menu too?
Even better would be a link to the test site.

ccmovies
Dec 28th, 2010, 04:25 AM
Hello ccmovies,
The CSS alone is not enough. Can you post the markup for the menu too?
Even better would be a link to the test site.

I am actually making it offline on my computer but here is the code:



<ul id="menu-top" class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>

ccmovies
Dec 28th, 2010, 04:27 AM
Oops, sorry that is the pre-submenu code. Here is the actual code:



<ul id="menu-top" class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
</ul>
</li>
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
</ul>

Excavator
Dec 28th, 2010, 04:39 AM
Hello ccmovies,
Have a look at this solution - http://nopeople.com/CSS%20tips/percentage_centered_ul/index.html

ccmovies
Dec 28th, 2010, 04:43 AM
Hello ccmovies,
Have a look at this solution - http://nopeople.com/CSS%20tips/percentage_centered_ul/index.html

Excellent! Thank you.

Excavator
Dec 28th, 2010, 04:50 AM
Based on that example -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
height: 400px;
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#menu-top {
background: #363636 url(images/menu-top-bg.png) repeat-x;
border: 1px solid #333333;
}
.menu {
height: 40px;
width: 400px;
margin: 0 auto;
}
.menu li {
background: url(images/menu-top-border.png) no-repeat;
line-height: 40px;
position: relative;
list-style: none;
display: block;
cursor: pointer;
float: left;
}
.menu li:first-child {background: none;}
.menu li a {
color: #FFFFFF;
text-decoration: none;
padding: 10px 6px 10px 10px;
text-shadow: 0px 0px 2px #000000;
}
.menu li:hover ul {display: block;}
.menu ul { /* drop down menu */
position: absolute;
display: none;
background: #1786E0;
border: 1px solid #006B97;
}
.menu ul li { /* drop down menu li's */
float: none;
border-bottom: 1px solid #006B97;
padding: 5px 5px 5px 10px;
width: 170px;
margin: 0;
}
.menu ul li:last-child {border-bottom: none;}
</style>
</head>
<body>
<div id="container">
<div id="menu-top">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
</ul>
</li>
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
<li><a href="#">Submenu link</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
</ul>
<!--end menu-top--></div>
<!--end container--></div>
</body>
</html>

ccmovies
Dec 28th, 2010, 04:56 AM
There seems to be only one problem that I have found. I am required to enter the width of the navigation. However, this is going to be a Wordpress theme and I don't know how long the width will actually be. It could change.

jimmyprior
Dec 28th, 2010, 09:36 AM
Really a educative and informative post, the post is good in all regards,I am glad to read this post.

mytouch 3g (http://www.cellhub.com/T-mobile-cell-phones/htc-mytouch-3g-35mm-jack-black.html)

Excavator
Dec 28th, 2010, 10:55 AM
There seems to be only one problem that I have found. I am required to enter the width of the navigation. However, this is going to be a Wordpress theme and I don't know how long the width will actually be. It could change.

Did you try that percentage centering that link I gave you shows? That doesn't require a width. I did not try it with your drop down though.

ccmovies
Dec 28th, 2010, 03:01 PM
Did you try that percentage centering that link I gave you shows? That doesn't require a width. I did not try it with your drop down though.

No I have not tried it yet. I will take a look at it in a little bit. Thanks!