导航和身体之间的空间

时间：2018-09-22 12:38:55

标签： html css asp.net

我的导航菜单有问题，菜单上方有空间出了问题，我想提一下他，但进展得不太顺利。

问题的img：

an img of the problem 我想占用这个空间。我尝试将margic 0和padding 0放在一起，但是并没有解决任何问题。

我的代码

body
{
    font-family:Arial;
    direction:rtl;
    margin:0;
    padding:0;
}

nav
{
    background:#414141;
    /*position: absolute;
    top:0;*/
    overflow:hidden;
}

/*שלב ראשון*/

nav ul li
{
   display:block;
   float:right;
   position:relative;
   
}

nav ul a
{
    display:block;
    width:150px;
    float:right;
    padding:10px 20px;
    
}

nav ul a:hover
{
    background:#414141;
}

/*שלב שני*/
nav ul li ul
{
    padding:0;
    margin:0;
    display:none;
    background:#333;
    top:42px;
    position:fixed;
}

nav ul li:hover > ul
{
    display:block;
}

nav ul li ul li
{
    float:none;
}
a
{
    text-decoration:none;
    color:black;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title></title>
</head>

<body runat="server">

    


    <nav>
        <ul>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

我的CSS代码

提前感谢您的帮助！

2 个答案:

答案 0 :(得分：1)

尝试删除margin和nav之间的ul 

nav ul {
  margin: 0;
}


body
{
    font-family:Arial;
    direction:rtl;
    margin:0;
    padding:0;
}

nav
{
    background:#414141;
    /*position: absolute;
    top:0;*/
    overflow:hidden;
}

nav ul {
  margin: 0;
    padding: 0;
}

/*שלב ראשון*/

nav ul li
{
   display:block;
   float:right;
   position:relative;
   
}

nav ul a
{
    display:block;
    width:150px;
    float:right;
    padding:10px 20px;
    
}

nav ul a:hover
{
    background:#414141;
}

/*שלב שני*/
nav ul li ul
{
    padding:0;
    margin:0;
    display:none;
    background:#333;
    top:42px;
    position:fixed;
}

nav ul li:hover > ul
{
    display:block;
}

nav ul li ul li
{
    float:none;
}
a
{
    text-decoration:none;
    color:black;
}
<html>
<head runat="server">
 
</head>

<body runat="server">

    


    <nav>
        <ul>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">שלב-1</a>
                <ul>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                    <li><a href="#">שלב-2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

答案 1 :(得分：1)

ul 标签包含以下默认值

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

因此，您需要使用以下内容覆盖它

ul {
    margin: 0;
    padding: 0;
}
相关问题
最新问题