当前位置: 动力学知识库 > 问答 > 编程问答 >

css - How to align drop down menu UL under parent LI?

问题描述:

So I'm adding a CSS drop down menu to a site however I am unable to get it to display properly.

The site in question is here > http://www.grimeforum.com/

When you hover over "news" LI, the child UL appears squashed.

I've spent the past few hours messing with positions but it either displays in the correct place but very squashed, or it floats to the left (but not squashed).

When I remove

position: relative;

from

#menu-nav li {

float: left;

position: relative;

}

it appers unsquashed, but floated to the left outside of the parent LI.

Any ideas?

Here is the fiddle - http://jsfiddle.net/sCW9A/

Remove postition:relative from line 463

网友答案:

Giving it a width of 175px worked for me.

Okay I got the problem. Firstly change #menu-nav li to #menu-nav>li since you don't want all li's to float left under menu-nav secondly add this to anchors under your submenu

white-space: nowrap; 
网友答案:

the a element must be the one with display: block and padding.

#menu-nav ul li {
  padding: 0;
}

#menu-nav ul li a {
  width: 100%;
  padding: 0 15px;
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  min-width: 180px;
}
网友答案:

Hmm, learnt something new.

Added white-space: nowrap; to #menu-nav ul li a{and hey presto, no need for   when using multiple word page titles, and no more layout issues.

Not really a fix but a workaround until I learn to code better I guess...!

分享给朋友:
您可能感兴趣的文章:
随机阅读: