Hello all,
I have some problems using Horizontal Menu Bar alignment or padding.
There is extra white stuffs in the edge of the manu items I dont know why.
There is the link to the website,
http://www.ultimatewingchun.com.au/test.html
The other link is the orginal view when I did not add the Horizontal Menu Bar in.
http://www.ultimatewingchun.com.au/original.html
Sincerely thanks for anyone who are trying to help.
Pete
You should set pop-up menu 'display: absolute;' and set top: ' ' from parent height.
Hello, I dont quite get know where I should change the pop-up menu. There is a custom setting in the css file to solve the extra white edge problem, but then I get into the other problem.
the custom setting, which is credited to Richard Williams, is as follow,
#wrapper #header #nav #MenuBar2 .MenuBarSubmenuVisible a {
display: block;
cursor: pointer;
background-color: #F0F9FF;
color: #666666;
text-decoration: none;
font-size: 11px;
padding: 0.5em 0.75em;
}
#wrapper #header #nav #MenuBar2 .MenuBarSubmenuVisible a:hover {
background-color: #33C;
color: #FFF;
}Any suggestions?
I have some problems using Horizontal Menu Bar alignment or padding.
To me the two look identical except the menu in the test version is a little narrower. There's no extra white space.
This could be browser dependent. I use FireFox 3.0.
OK Let try this.
CSS:
*html {
background: #373737; height: 100% }
body {
background: #373737; font: normal 100% Arial,Verdana,Lucida Grande,Sans-serif }
ul, li {
margin: 0; padding: 0; list-style: none }
html a {
text-decoration: none; color: #EEEEEE }
p {
margin: 0; padding: 0 }
/* Container */
body > #container {
width: 878px; margin: 0 auto; padding: 42px 0 87px; background: white; line-height: 100%; position: relative }
#container:after {
content: '.'; height: 0; display: block; clear: both; visibility: hidden }
#container > p {
text-align: center; border-bottom: 1px solid #111111; margin: 0 20%; padding-bottom: 7pt }
/* Primary Navigation Menu Bar */
ul#nav-menu {
width: 687px; height: 33px; line-height: 33px; display: table; background: #111111; position: absolute; top: 0; left: 0 }
ul#nav-menu li {
display: table-cell; float: left; vertical-align: baseline; position: relative }
ul#nav-menu a {
display: block; float: none ! important; padding: 0 22px; height: 33px; line-height: 33px }
/* Primary Hover Link */
ul#nav-menu li a:hover, ul#nav-menu li:hover a {
color: #373737 }
ul#nav-menu li.last {
border-bottom: none }
/* Sub Menu */
ul#nav-menu ul {
display: none; width: 147px; position: absolute; top: 33px; left: 0; border-style: none solid; border-width: 1px; border-color: #111111 }
ul#nav-menu ul:after {
content: '.'; height: 0; clear: both; display: block; visibility: hidden }
ul#nav-menu ul li {
display: block; float: left; width: 147px }
/* Secondary Link */
ul#nav-menu li:hover li a {
background: #111111; color: #CCCCCC; text-align: center }
ul#nav-menu li:hover li a:hover, ul#nav-menu li:hover li:hover a {
background: #1a1a1a; color: #EEEEEE }
/* Third Link */
ul#nav-menu li:hover li:hover li a {
background: #111111; color: #CCCCCC }
ul#nav-menu li:hover li:hover li a:hover, ul#nav-menu li:hover li:hover li:hover a {
background: #1a1a1a; color: #EEEEEE }
/* After Secondary */
ul#nav-menu li:hover ul ul {
position: absolute; top: 0; left: 147px; display: none }
/* Show Sub Menu by Hover */
ul#nav-menu li:hover ul, ul#nav-menu ul li:hover ul {
display: block }
/* Sub Menu Box Shadow */
ul#nav-menu ul {
-webkit-box-shadow: 7px 3px 8px #888; outline: none }Here is HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="container">
<ul id="nav-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul><li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
<li><a href="#">Item 2-3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul><li><a href="#">Item 3-1</a>
<ul><li><a href="#">Item 3-1a</a></li>
<li><a href="#">Item 3-1b</a></li>
</ul>
</li>
<li><a href="#">Item 3-2</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
<p>Horizontal Menu</p>
</div>
</body>
</html>Have fun..
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.