2 simple questions on shapping navigation menus with CSS

HTML & CSS
1

Hi everybody!

Appreciate any help on the following 2 very basic problems for keeping a navigation menu centered and controlling the size of its links.

problem 1: I can’t get the menu to keep centered in respect to the website’s width.

problem 2: I can’t control the size of each link. When I hoover I set the font to go from normal to bold, and then the size of the link will change too. I want to keep it the same size so the navigation menu doesn’t change its size.

Thx again.

follows the html and Css

<div id="navmenu">
		<ul>
		<li><a href="aaa.html">aaa</a></li>
		<li><a href="bbb.html">bbb</a></li>			
				<ul>
				<li><a href="111.html">111</a></li>
				<li><a href="222.html">222</a></li>
				</ul>
		</li>		
		<li><a href="ccc.html">ccc</a></li>
		<li><a href="ddd.html">ddd</a></li>
		</ul>
	</div>

CSS:

#navmenu {
	float: left;
	margin: 10px 0px 0px 0px;
	width: 1000px;
	background-color: #ffffff;
}

#navmenu {
	font-size: 15px;

}

#navmenu ul { 
		margin: 0px 0px 0px 0px; 
		padding:0px 0px 0px 0px; 
		width: none;
		list-style: none; 
		position: relative;
		border-right: 1px, thin;
		font-color: #6a6a6a;
} 

#navmenu ul ul { 
		width: 260px;
		margin: 0; 
		list-style: none; 
		display: none; 
		position: absolute; 
		top: 100%; 
		left: 0; 
		border-right: none;
}
 

#navmenu ul li { 
		line-height: 20px;
		vertical-align: middle;
		float: left; 
		display: inline; 
		position: relative;
		padding: 0px 0px 0px 0px;
} 

#navmenu ul ul li { 
		width: 260px; 
		display: block;
} 

/* Root Menu */ 

#navmenu ul a { 
		border-top: none;
		border-bottom: none; 
		border-right: 1px solid #000000; 
		padding: 6px; 
		float: left; 
		display: block; 
		background: #FFFFFF; 
		color: #050505; 
		text-decoration: none; height: 12px;
} 

#navmenu ul ul a { 
		border-top: none;
		border-bottom: none; 
		padding: 6px; 
		float: left; 
		display: block; 
		background: #FFFFFF; 
		color: #050505; 
		border-right: none;
		text-decoration: none; height: 12px;
} 

/* Root Menu Hover Persistence */ 
#navmenu ul a:hover, #navmenu ul li:hover a, #navmenu ul li.iehover a { background: #ffffff; color: #3c81a9;font-weight: bold; }
 
/* 2nd Menu */ 
#navmenu ul li:hover li a, #navmenu ul li.iehover li a { float: none; background: #ffffff;color: #050505; font-weight: normal; }
 
/* 2nd Menu Hover Persistence */ 
#navmenu ul li:hover li a:hover, #navmenu ul li:hover li:hover a, #navmenu ul li.iehover li a:hover, #navmenu ul li.iehover li.iehover a { background: #ffffff; color: #3c81a9; font-weight: bold; } 

/* Hover Function - Do Not Move */ 
#navmenu ul li:hover ul ul, #navmenu ul li.iehover ul ul { display: none; } 

#navmenu ul li:hover ul, #navmenu ul ul li:hover ul, #navmenu ul li.iehover ul, #navmenu ul ul li.iehover ul { display: block; }
2

Hi,

You won’t be able to center a floated menu like that. If the menu needs block characteristics then you would need to use display:inline-block instead.

You can’t change text to bold and not expect a re-flow unless you set a width for the element first so that a reflow has no effect. It’s just one of those things that you can’t really do.

Very roughly like this:


<!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">
#navmenu {
    margin: 10px 0 0 0;
    width: 1000px;
    margin:auto;
    background-color:red;
    height:24px;
}
#navmenu {
    font-size: 15px;
}
#navmenu ul {
    margin:0;
    padding:0;
    list-style: none;
    position: relative;
    color: #6a6a6a;
    width:100%;
    display:table;
    text-align:center;
}
#navmenu ul ul {
    width: 260px;
    margin: 0;
    margin-left:-999em;
    position: absolute;
    top: 100%;
    left: 0;
    border-right: none;
 border:1px solid #000;
}
#navmenu ul li {
    display: inline;
    position: relative;
    zoom:1.0;
}
#navmenu ul ul li {
    width: 260px;
    display: block;
    float:left;
    clear:left;
}
/* Root Menu */ 

#navmenu ul a {
    border-top: none;
    border-bottom: none;
    border-right: 1px solid #000000;
    line-height: 24px;
    height:24px;
    overflow:hidden;
    display: inline-block;
    background: #FFFFFF;
    color: #050505;
    text-decoration: none;
    min-width:100px
}
#navmenu ul ul a {
    border-top: none;
    border-bottom: none;
    float: left;
    display: block;
    background: #FFFFFF;
    color: #050505;
    border-right: none;
    text-decoration: none;
}
/* Root Menu Hover Persistence */ 
#navmenu ul a:hover, #navmenu ul li:hover a, #navmenu ul li.iehover a {
    background: #ffffff;
    color: #3c81a9;
    font-weight: bold;
}

/* 2nd Menu */ 
#navmenu ul li:hover li a, #navmenu ul li.iehover li a {
    float: none;
    background: #ffffff;
    color: #050505;
    font-weight: normal;
}
/* 2nd Menu Hover Persistence */ 
#navmenu ul li:hover li a:hover, #navmenu ul li:hover li:hover a, #navmenu ul li.iehover li a:hover, #navmenu ul li.iehover li.iehover a {
    background: #ffffff;
    color: #3c81a9;
    font-weight: bold;
}
/* Hover Function - Do Not Move */ 
#navmenu ul li:hover ul ul, #navmenu ul li.iehover ul ul {
    margin-left:-999em
}
#navmenu ul li:hover ul, #navmenu ul ul li:hover ul, #navmenu ul li.iehover ul, #navmenu ul ul li.iehover ul {
    margin-left:0;
}
</style>
</head>
<body>
<div id="navmenu">
    <ul>
        <li><a href="aaa.html">aaa</a></li>
        <li><a href="bbb.html">bbb</a>
            <ul>
                <li><a href="111.html">111</a></li>
                <li><a href="222.html">222</a></li>
            </ul>
        </li>
        <li><a href="ccc.html">ccc</a></li>
        <li><a href="ddd.html">ddd</a></li>
    </ul>
</div>
</body>
</html>