问题在于面对具有类名称为.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;
}

最佳答案

进行更改

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


位置:相对;

FIDDLE

关于html - HTML 5导航菜单显示悬停时子菜单中的重叠列表项,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18399821/

10-12 12:45
查看更多