Member Avatar for vik85
vik85 0 Newbie Poster

hi everybody please help me out. i have little bit prob in my css menu .my display menu is display properly can you give me some idea. my site is Tonerquest
i wanna display menu short n good.
my css style sheet is

#horizNav2
{
	position:relative;
	z-index:-1;
}
.leftNav
{
	position: relative; 
	z-index:0;
}
/*styles to our navigation bar*/
#qm1
{
    margin: 0;
    padding: 0;
    width:900px;
	height:35px;
	text-align:left;
}

#qm1 li
{
	list-style: none;
	float: left;
	display:block;
	position:relative;
	z-index:1;
	text-align:left;
	margin:auto;

}
#qm1 li a
{
	/*display: block;
    padding: 3px 8px;
    background-color: #5e8ce9;
    color: #fff;
    text-decoration: none; */
	display:block;
	background-color:transparent;
	color:#333333;
	font-family:Arial;
	font-size:2px;
	text-align:left;
	text-decoration:none;
	border-width:0px 0px 0px 1px;
	border-style:solid;
	border-color:#699EDC;
	padding-left: 1.5em;
	padding-right: 1em;
}
*/*subnavigation section*/
#qm1 li ul
{
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #69f;
}

/*style the list for its “hover” state:*/
#qm1 li:hover ul
{
	display: block;
	position: absolute;/*change the absolute to relative*/
	margin: 0;
	padding: 0;
	text-align:right;
	text-decoration:none;
}
#qm1 li:hover li
{
    float: none; 
}
#qm1 li:hover li a 
{
	background-color: #69f;
	color: #fff;
	display:block;
	position:relative;
	z-index:500;
	line-height:1.5;
	overflow:auto;
	width:auto;
}
#qm1 li li a:hover
{
	background-color: #8db3ff;
	border-style: none;
	width:inherit;

}
#qm1 li:hover ul, #qm1 li.hover ul
{
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
}
#qm1 li:hover li, #qm1 li.hover li 
{
    float: none; 
}
#qm1 li:hover li a, #qm1 li.hover li a 
{
	background-color: #69f;
	width:auto;
}

thanks a lot.its very urgent .
please guys help me out.
thanks
Vik

  • 1 Contributor
  • 0 Replies
  • 113 Views

Dani AI

Generated

For — quick diagnosis and a focused fix list.

The menu looks off because a few layout rules are fighting each other: a negative z-index on the nav wrapper can push the whole menu behind other page layers; the anchor font-size (very small) plus large left padding produces odd spacing; floats with margin:auto won’t center and can leave the parent with zero height; and the dropdowns need explicit vertical placement so they sit below the parent. To make the bar compact, reduce padding and use line-height to vertically center text instead of big left padding.

Try these targeted changes (keeps your structure but fixes the main problems):

#qm1 { overflow: hidden; }                /* contain floated items */
#qm1 li { float: left; margin: 0; position: relative; }
#qm1 li a { display: block; padding: 0 10px; font-size: 13px; line-height: 35px; }
#qm1 li > ul { display: none; position: absolute; top: 100%; left: 0; min-width: 10em; z-index: 999; white-space: nowrap; }
#qm1 li:hover > ul { display: block; }

Debug checklist if problems persist:

  • Remove any negative z-index on outer wrappers; give the nav a non-negative stacking order (e.g., z-index: 1 or 999) and ensure no ancestor creates an unexpected stacking context (transforms, opacity, or positioned parents can do that).
  • Use dev tools to inspect computed z-index and position. Temporarily apply visible background colors to see element boxes.
  • Replace large left padding with symmetric horizontal padding and line-height to keep the menu compact.
  • If a submenu should be right-aligned under its parent, position it with right: 0 instead of relying on text-align.

These changes keep the dropdown placement predictable, make items fully clickable, and produce a short, tidy horizontal menu without reworking your HTML.

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.