Question

我一直在工作 - 只是为了修复一个子菜单。这是我的CSS：

/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif
}

#navigation ul {
margin:0;
padding:0
}

#navigation li {
height:22px;
float:left;
position:relative;
display:block
}

#navigation li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff
}

#navigation li a:hover {
text-decoration:underline;
background-color:#06C
}

/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute
}

#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3
}

#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-style:none
}

#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3
}

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <link href="submenu.css" rel="stylesheet" type="text/css">

    <title></title>
</head>

<body>
    <div id="navigation">
            <ul>
                    <li>
                            <a href="#">News</a>

                            <ul>
                                    <li>
                                            <a href="#">National</a>
                                    </li>

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

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

                                    <li>
                                            <a href="#">Hollybood</a>
                                    </li>
                            </ul>
                    </li>

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

                            <ul>
                                    <li>
                                            <a href="#">IT/Software</a>
                                    </li>

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

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

                                    <li>
                                            <a href="#">Neuro Science</a>
                                    </li>
                            </ul>
                    </li>

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

                            <ul>
                                    <li>
                                            <a href="#">Cricket</a>
                                    </li>

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

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

                                    <li>
                                            <a href="#">Hockey</a>
                                    </li>
                            </ul>
                    </li>

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

                            <ul>
                                    <li>
                                            <a href="#">India</a>
                                    </li>

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

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

                                    <li>
                                            <a href="#">Pakistaan</a>
                                    </li>
                            </ul>
                    </li>
            </ul>
    </div>
</body>
</html>

第一个问题：我的子菜单块没有正确显示。如果菜单包含多个单词，则下一个单词将转到下一行。我该如何将其内联？请参阅此图片：http://i.stack.imgur.com/9SqWf.jpg

第二个问题：当我将鼠标悬停在子菜单上时，如何使它们标准化？请参阅此图片：http://i.stack.imgur.com/DULg6.jpg

其中一个在右侧留空空间 - 它假设在最长的菜单后显示完整的蓝色背景。

有人可以帮我解释和解决这个问题吗？我只想让它们整洁。

Answer 1

代码中存在一些问题。你提到元素是位置：绝对，但你没有提到它们的完美宽度。 2.选择器定义是代码中的主要问题。 3.填充测量

你可以复制整个css＆amp;最重要的是始终使用缩进

    /*************First Menu Layer************/
#navigation {
    width:820px;
    background-color:#45AAFF;
    height:22px;
    border-bottom:1px solid #fff;
    font-family:'Signika',sans-serif;
}

#navigation ul {
    margin:0;
    padding:0;
}

#navigation li {
    height:22px;
    float:left;
    position:relative;
    display:block;
}

#navigation>ul>li>a {
    color:#fff;
    line-height:22px;
    font-size:14px;
    text-decoration:none;
    padding:5px 15px 6px;
    border-right:1px solid #fff;
}

#navigation li a:hover {
    text-decoration:underline;
}

/*************Second Menu Layer************/
#navigation li ul {
    display:none;
    position:absolute;
}

#navigation li:hover ul {
    display:block;
    text-decoration:none;
    background-color:#45AAFF;
    border-bottom:1px dotted #006AC3;
    width: 250px;
}

#navigation li ul li{
    position: relative;
    min-width: 100%;
    padding: 5px 0px 5px 0px;
}
#navigation li ul li a {
    color:#fff;
    line-height:22px;
    font-size:14px;
    text-decoration:none;
    padding: 5px 0px 5px 0px;
    border-style:none;
    display: inline-block;
    min-width: 100%;
}

#navigation li ul li a:hover {
    text-decoration:none;
    border-bottom:1px solid #006AC3;
    background-color:#06C;
}

菜单＆amp;子菜单问题[CSS]

1 个答案: