Question

我是CSS的新手，我需要导航栏的帮助。我需要在ABOUT US部分下方获得子主题，但我无法得到它，它一直出现在右边。任何事情都会受到赞赏。如果需要，我可以提供HTML文件。

CSS：

container{
    position: relative;
    height: 70px;
    width: 1100px;
}

.masthead{
    background: #039be5;
    width: 100%;
    top: 0;
    position: fixed;
    color: white;
}

.logo{
    position: relative;
    float: left;
    left: 90px;
    font-family: Josefin Slab;
    font-size: 21px;
    top: 17px;

}
.logo h1 a {color: white;  text-decoration: none; }

h1{
    margin: 0;
}

a:link    {color: white;  text-decoration: none; }
a:visited {color: white;  text-decoration: none; }
a:hover   {color: white;  color: black; }
a:active  {color: white;  text-decoration: none; }

#navcontent{
    word-spacing: 4px;
}

li{
    position: relative;
    left: 155px;
    list-style: none;
    font-family: Raleway;
    float: left;
    margin-left: 21px; 
    padding-top: 15px;
    font-size: 20px;
}

.navigation{
    float: right;
}

.navigation ul>li ul{
    height: 100%;
    position: relative;
    bottom: 100%;
}

.navigation ul>li ul>li{
    bottom: 0px;
    display: none;
}

.navigation>ul>li:hover ul>li{
    display: block;
}

.navigation>ul>li a:hover {
    text-decoration: none;
    cursor:pointer;
}

HTML

<div class="masthead">
    <div class="container">
        <div class="logo">
            <h1><a href="index.htm"> MY SITE</a></h1>

        </div>
        <div class="navigation">
            <ul>
                <li><a href="courses.htm">Courses</a>
                </li>
                <li><a href="institution.htm">Places</a>
                </li>
                <li><a href="about.htm">More</a>

                    <ul>
                        <li><a href="#">Share</a>
                        </li>
                        <li><a href="#"> Help</a>
                        </li>
                    </ul>
                </li>
                <li id="navcontent">||<a href="signin.htm"> Sign In </a>
                </li>
                <li><a href="signup.htm">Sign Up</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Fiddle

Answer 1

至关重要，

<强> CSS

ul{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}
ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
}
ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}
ul li:hover
{
    background:#f6f6f6
}
ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}
ul ul li
{
    float:none;
    width:200px
}
ul ul a
{
    line-height:120%;
    padding:10px 15px
}
ul ul ul
{
    top:0;
    left:100%
}
ul li:hover > ul
{
    display:block
}

Live result here。希望这个帮助

<强>更新

好的，由于Jon P问我会描述这段代码。实际上主键是：

ul ul
{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff; /*remove, no effect*/ 
  padding:0 /*remove, no effect*/
}

首先，我们让孩子（<ul>）隐藏display: none并为其提供属性position:absolute, top:100%, left:0;，让它在MORE链接下

然后我们想要什么？当我们悬停MORE链接时显示它。要做到这一点，只需简单地让孩子（<ul>）可见即可。当然，我们使用这个属性：

ul li:hover > ul
{
  display:block
}

CSS中的导航栏错误

1 个答案: