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

jsフィドル

position:absolute; を設定する必要があります。ドロップダウンメニューに：

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

この変更を行う

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

位置:相対;

フィドル

于 2013-08-23T09:56:18.590 に答える