Question

我正在尝试创建一个简单的下拉菜单，但Meme的子项不会停留在块中。

如果我移除header li左侧的浮动广告，Memes的菜单会显示在Home下方。

HTML：

<header>
    <div class="container">
        <div id="brand">
            <h1><span class="highlight">My</span> website</h1>
        </div>
        <nav>
            <ul>
                <li class="current"><a href="Home.html">Home</a></li>
                <li><a href="cv.html">Curriculum Vitae</a></li>
                <li><a href="pc.html">PC Gaming</a></li>
                <li><a href="#">Memes</a>  
                    <ul>
                        <li><a href="#">Hot</a></li>
                        <li><a href="#">Trending</a></li>
                        <li><a href="#">Upload File</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>        
</header>

CSS：

header {
    background: #35424a;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #e8491d 3px solid;   
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

header li {
    float: left;
    display: inline;
    padding: 0 20px 0 20px;  
}

header #brand {
    float: left;
}

header #brand h1 {
    margin: 0;
}
header nav {
    float:right;
    margin-top: 10px;
}
header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}
header a:hover{
    color: #ccc;
    font-weight: bold;
}
nav ul li:hover ul {
    display: block;
} 
nav ul ul {
    display:none;
    position: absolute;
}
nav ul ul li {
    display: block;
    background: #e8491d;
}

Answer 1

从require(data.tree) require(collapsibleTree) Relationships <- data.frame( Parent=c(".",".","A", "A", "A", "B", "B", "C", "E", "E", "F", "K", "K", "M", "M"), Child=c("A","K","B", "C", "D", "E", "F", "G", "H", "I", "J", "L", "M", "N", "O"), Value=1:15 ) tree <- data.tree::FromDataFrameNetwork(Relationships, "Value") tree$Value <- 0 collapsibleTree(tree, tooltip=TRUE, attribute="Value", aggFun=identity)移除float:left并改为header li。

编辑：我不知道它是如何工作的，因为它在这个小提琴中，使用您提供的相同代码。必须有其他具有冲突性的代码，而您没有包含这些代码。

＆＃13;

display:inline-block;

＆＃13;

 header {
    background: #35424a;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #e8491d 3px solid;   
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

header li {
    display: inline-block;
    padding: 0 20px 0 20px;  
}

header #brand {
    float: left;
}

header #brand h1 {
    margin: 0;
}
header nav {
    float:right;
    margin-top: 10px;
}
header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}
header a:hover{
    color: #ccc;
    font-weight: bold;
}
nav ul li:hover ul {
    display: block;
} 
nav ul ul {
    display:none;
    position: absolute;
}
nav ul ul li {
    display: block;
    background: #e8491d;
}

＆＃13;

Answer 2

删除左边的浮动并更改以下内容：

header li {
    position: relative;
    display: inline;
    padding: 0 20px 0 20px;  
}

nav ul ul {
    display:none;
    position: absolute;
    top: 100%;
    left: 0;
}

demo

Answer 3

如果对嵌入式菜单使用flexbox，则它处理的子项宽度优于浮动菜单。

如果您愿意更改此列，则还可以更改此弹性以使用flex-direction: row。

必须更改其他一些内容才能根据其父菜单元素正确定位绝对元素。但是没有太多改变，我甚至包括一个以下元素来展示它们如何与下面的子菜单对齐。

header {
  background: #35424a;
  color: #fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;   
}

header a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  display: inline-block;
  padding: 0 20px;  
}

header #brand {
  float: left;
}

header #brand h1 {
  margin: 0;
}
header nav {
  float:right;
}
header .highlight, header .current a {
  color: #e8491d;
  font-weight: bold;
}
header a:hover{
  color: #ccc;
  font-weight: bold;
}
nav ul li:hover ul {
  display: flex;
  align-items: start;
  flex-direction: column;
  background: #e8491d;
} 
nav > ul{
  height: 20px;
}
nav ul li{
  position: relative;
  white-space: nowrap;
}
nav ul ul {
  display:none;
  position: absolute;
  right: 0;
  top: 100%;
  width: auto;
  padding: 0;
}
nav ul ul li {
  padding: 0 5px;
}

<header>
    <div class="container">
        <div id="brand">
            <h1><span class="highlight">My</span> website</h1>
        </div>
        <nav>
            <ul>
                <li class="current"><a href="Home.html">Home</a></li>
                <li><a href="cv.html">Curriculum Vitae</a></li>
                <li><a href="pc.html">PC Gaming</a></li>
                <li><a href="#">Memes</a>  
                    <ul>
                        <li><a href="#">Hot</a></li>
                        <li><a href="#">Trending</a></li>
                        <li><a href="#">Upload File</a></li>
                    </ul>
                </li>
                <li><a href="#">Memes2</a>  
                    <ul>
                        <li><a href="#">Hot</a></li>
                        <li><a href="#">Trending</a></li>
                        <li><a href="#">Upload File</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>        
</header>

简单的下拉菜单

3 个答案: