Question

我从CSS MenuMaker改编了一个菜单，我一直在寻找它为什么表现不同。它是here。当您单击菜单项时，子菜单会打开，但如果鼠标停留在单击的菜单项上，则其余部分不会向下移动以腾出空间，子菜单不会使用造型应该是。相反，它使用顶级菜单项的样式。

HTML

// the delegate now takes a string argument, holding the received data
public delegate void UpdateText(string text);

// checks for the correct EventType and calls updateText 
// after all available data is read
private void DataReceivedHandler(object sender, SerialDataReceivedEventArgs e)
{
    try
    {
        if (e.EventType == SerialData.Chars)
        {
            // read all data and then handle
            updateTextBox(port.ReadExisting());
        }
        else
        {
            port.Close();
        }
    }
    catch
    {
        port.Close();
    }     
}

// called twice, once from the background thread
// and by BeginInvoke
public void updateTextBox(string text)
{
    // do we need to be switch to the UI thread?
    if (tWGT.InvokeRequired)
    {
        // yes, so setup the delegate and pass on the parameter
        // notice how BeginInvoke will call this same method again
        tWGT.BeginInvoke(new UpdateText(updateTextBox), text);
    }
    else
    {
        // show the received data
        tWGT.AppendText(text);
        tWGT.ScrollToCaret();
    } 
}

// nicely close
private void Form1_FormClosed(object sender, FormClosedEventArgs e)
{
    // if omitted you'll run into problems if this forms gets reopened
    if (port.IsOpen) port.Close();
    port.Dispose();
}

CSS

<div class="col-2 col-m-2 accordian darkYellow roundLeft">
    <p class="title">Melt-in-Place Station (MIP)
    </p>
    <ul>
        <li class="has-sub"><a><span>Reference Docs</span></a>
            <ul>
            <li><a href="http://ntrs.nasa.gov/archive/nasa/casi.ntrs.nasa.gov/20150000305.pdf">
                    <span>Melted regolith construction</span></a></li>
            </ul>
        </li>
        <li class="has-sub"><a><span>Forum Threads</span></a></li>
        <li class="has-sub"><a><span>Models</span></a></li>
    </ul>
</div>

的jQuery

.accordian,
.accordian ul,
.accordian li,
.accordian a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
  line-height: 1;
  font-size: 1em;
  position: relative;
  color: yellow;
}
p.title {
    font-weight: 600;
    padding: 16px 6px;
}
.accordian a {
  line-height: 1.3;
  cursor: pointer;
}
.accordian {
    font-weight: 400;
    color: rgba(255, 255, 0, 1);
    text-align: right;
}
.accordian > ul > li {
  margin: 0 0 2px 0;
}
.accordian > ul > li:last-child {
  margin: 0;
}
.accordian > ul > li > a {
  font-size: 1.1em;
  display: block;
  background: rgba(50, 50, 50, 0.6);
}
.accordian > ul > li > a > span {
  display: block;
  padding: 6px 10px;
}
.accordian > ul > li > a:hover {
  text-decoration: none;
}
.accordian > ul > li.active {
  border-bottom: none;
}
.accordian > ul > li.active > a {
    background: #333;
}
.accordian > ul > li.has-sub > a span {
  background: url(http://www.moonwards.com/img/iconPlus.png) no-repeat left center; 
}
.accordian > ul > li.has-sub.active > a span {
  background: url(http://www.moonwards.com/img/iconMinus.png) no-repeat left center; 
}
/* Sub menu */
.accordian ul ul {
  padding: 5px 12px;
  display: none;
}
.accordian ul ul li {
  padding: 3px 0;
}
.accordian ul ul a {
  display: block;
  font-size: 0.9em;
  font-weight: 400italic;
}

我认为这是一些愚蠢的事情，但任何帮助都会受到赞赏。

Answer 1

经过检查，我认为我找到了罪魁祸首。尝试编辑你的CSS：

Model not found: estate.nursery.requestreceivewizard

Answer 2

你的问题不完全是CSS。我只是发现李的高度正在覆盖下拉列表。但是，如果减小LI的高度，则下一个LI不会打开它所需的量。一个快速的补丁就是在下面应用这个CSS，但是我更愿意让JQuery的人来帮助你。

  .accordian ul ul {
    padding: 5px 12px;
    display: none;
    margin-top: 0px;
    z-index: 99999;
    position: relative;
    background: none;
 }

P.S。这解决了您提出的问题，但您需要调整字体和大小，以便没有差异

为什么这个手风琴菜单中的子菜单不能保持打开状态？

2 个答案: