Member Avatar for pckong

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

  • 3 Contributors
  • 4 Replies
  • 108 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ko ko

Recommended Answers

All 4 Replies

Member Avatar for ko ko

You should set pop-up menu 'display: absolute;' and set top: ' ' from parent height.

Member Avatar for pckong

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?

Member Avatar for ingeva

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.

Member Avatar for ko ko

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..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.