0

问题是面对类名为 .SubMenu 的嵌套无序列表，下面是屏幕截图，我们的活动下方的子菜单未显示 HTML makrup 中存在的所有 5 个列表项

在此处输入图像描述

这是 HTML 5 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <meta name = "description" content = "this is sample description!!">
    <link rel = "stylesheet" href = "style.css">
    <title>Official Website</title>
</head>
<body>
    <header>
        <h1 class = "logo">Sample</h1>
        <ul class = "SocialMediaLinks">
            <li><a href = "#">F</a></li>
            <li><a href = "#">T</a></li>
            <li><a href = "#">G+</a></li>
        </ul>
    </header>
    <nav class = "NavigationSection">
        <ul class = "MainMenu">
            <li><a href = "#">The Organization</a></li>
            <li><a href = "#">The Mission</a></li>
            <li><a href = "#">The Guru</a></li>
            <li><a href = "#">Our Activities</a>
                <ul class = "SubMenu">
                    <li>menu 1</li>
                    <li>menu 2</li>
                    <li>menu 3</li>
                    <li>menu 4</li>
                    <li>menu 5</li>
                </ul>
            </li>
            <li><a href = "#">Programmes By Guruji</a></li>
            <li><a href = "#">Team TadEkam</a></li>
            <li><a href = "#">Our Blogs</a></li>
            <li><a href = "#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

这是CSS

/*
Name : style.css
Description : contains sitewide css rules for every element on all the pages
*/

/* --- HEADER SECTION ---*/
header{
background-color: #197419;
padding: 15px;
}
/* --- LOGO SECTION ---*/
.logo{
font-size: 40px;
color: white;
display: inline;
margin-left: 30px;
}
/* --- SOCIAL MEDIA SECTION ---*/
.SocialMediaLinks{
display: inline;
margin-left: 1100px;
}
.SocialMediaLinks li{
list-style-type: none;
display: inline-block;
font-size: 40px;
color: white;
}
.SocialMediaLinks li a{
padding: 7px;
}
.SocialMediaLinks a:link{
text-decoration: none;
color: white;
}
.SocialMediaLinks a:visited{
text-decoration: none;
color: white;
}
.SocialMediaLinks a:hover{
background-color: #28A428;
border-radius: 5px;
}

/* --- BODY SECTION --- */
body{
margin: 0px;
}

/* --- NAVIGATION SECTION --- */
.NavigationSection{
position: relative;
background-color: #197419;
padding: 5px;
}
/* --- MAIN MENU SECTION ---*/
.MainMenu li{
position: relative;
list-style-type: none;
font-size: 20px;
display: inline-block;
margin-right: 30px;
color: white;
}
.MainMenu li a{
padding: 5px;
}
.MainMenu a:link{
text-decoration: none;
color: white;
}
.MainMenu a:visited{
text-decoration: none;
color: white;
}
.MainMenu a:hover{
background-color: #28A428;
border-radius: 5px;
}
.MainMenu li .SubMenu li{
list-style-type: none;
display: none;
}
.MainMenu li:hover .SubMenu li{
display: block;
position: absolute;
}
4

3 回答 3

1

进行此更改

.MainMenu li:hover .SubMenu li{
display: block;
position: relative;
}

位置：相对；

小提琴

于 2013-08-23T09:56:18.590 回答
1

jsFiddle

您必须设置位置：绝对；到下拉菜单：

.MainMenu li .SubMenu {
    position:absolute;
    top:25px;
    left:-20px;
    width: 200px;
    background:#197419;
    padding-top:10px;
}
于 2013-08-23T10:11:58.550 回答
1

你<body>的太短和隐藏的下降。在主菜单上添加 position:relative 和 z-index 并在菜单后添加内容。我使用了这段代码：

margin-bottom:100px;
    position:relative;
    z-index:9999;

http://jsfiddle.net/YnWUR/1/

于 2013-08-23T10:20:00.617 回答