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

html - dropdown menu: whole menu comes down

问题描述:

I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.

This is my code:

<nav class="icons">

<ul>

<li><a href="#about" class="smoothScroll">Home</a></li>

<li><a href="#page1" class="smoothScroll">About</a></li>

<li><a href="#page2" class="smoothScroll">Portfolio</a></li>

<li><a href="#page3" class="smoothScroll">Contact</a></li>

<li><a href="#">Account</a>

<ul id="login">

<li><a href="changepassword.php">Change password</a></li>

<li><a href="update.php">Update details</a></li>

<li><a href="logout.php">Logout</a></li>

</ul>

</li>

</ul>

</nav>

And the CSS

nav {

height: 70px;

width: 100%;

position: fixed;

top: 0;

left: 0;

}

nav ul ul {

display: none;

}

nav ul li:hover > ul {

display: block;

}

ul {

margin: 0;

padding: 0;

list-style: none;

margin-left: 5%;

}

ul li {

display: inline-block;

width: 15%;

text-align: center;

line-height: 70px;

}

ul li a {

text-decoration: none;

color: #fff;

font-size: 2em;

display: block;

}

ul li a:hover {

border-bottom: solid black 1px;

}

ul#login{

margin: 0;

padding: 0;

list-style: none;

}

ul#login li {

display: block;

width: 30%;

text-align: center;

line-height: 70px;

}

ul#login li a {

text-decoration: none;

color: #fff;

font-size: 2em;

display: block;

}

ul#login li ul li{

width: 20%;

}

ul#login li ul li a {

text-decoration: none;

color: #fff;

font-size: 0.7em;

display: block;

}

ul#login li a:hover {

border-bottom: solid black 1px;

}

I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact.

Can someone please tell me what I'm doing wrong with the dropdown menu?

网友答案:

Add this css

ul li{
    position:relative;
}

#login{
    position:absolute;
    top:71px;
    left:0;
}

FIDDLE

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