懸停時導航欄背景顏色-有解無憂

我有一個帶有下拉選單的導航欄，效果很好，但是為了顯示選擇的內容，我想在懸停時更改背景。

但是當我嘗試這樣做時它不適合它看起來像這樣：

懸停時導航欄背景顏色

在下拉串列中，它看起來像這樣：

懸停時導航欄背景顏色

我希望背景適合導航欄，但我不知道如何。

nav {
width: 100%;
height: 60px;
background-color: gray;}

nav ul {
float: left;}

nav ul li {
float: left;
list-style: none;
position: relative;}

nav ul li a {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;}

nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}

nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 60px;
border-radius: 4px;}

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

nav ul li ul li {
width: 180px;
border-radius: 4px;}

nav ul li ul li a {
padding: 0;}

/*top right bottom left*/
nav ul li ul li a:hover {
padding: 10px 10px 10px 10px;
color: white;
background-color: lightblue;}

<nav>
    <ul>
        <li><a href='#'>Thuispagina</a></li>
        <li><a href='#'>Religie</a>
            <ul>
                <li><a href='#'>Christendom</a>
                <li><a href='#'>Islam</a>
                <li><a href='#'>Boedhisme</a>
            </ul>
        </li>
        <li><a href='#'>Interview</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
</nav>

uj5u.com熱心網友回復：

我想這是你的要求。不需要任何-margin替代制作ul padding-left to zero和懸停背景添加填充到<a>標簽。

nav {
width: 100%;
background-color: gray;}

nav ul {
float: left;
font-size: 0;
padding: 0;
}

nav ul li {
float: left;
list-style: none;
position: relative;
background: gray;
}

nav ul li a {
margin-left: 0;
padding:15px 20px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}

nav ul li a:hover {
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}

nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 0;
border-radius: 4px;}

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

nav ul li ul li {
width: 180px;
border-radius: 4px;}

nav ul li ul li a {
padding: 15px 20px;}

/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;}

<nav>

                    <ul>

                        <li><a href='#'>Thuispagina</a></li>
                        <li><a href='#'>Religie</a>
                            <ul>
                                <li><a href='#'>Christendom</a>
                                <li><a href='#'>Islam</a>
                                <li><a href='#'>Boedhisme</a>
                            </ul>
                        </li>
                        <li><a href='#'>Interview</a></li>
                        <li><a href='#'>Contact</a></li>

                    </ul>

                </nav>

uj5u.com熱心網友回復：

您必須編輯填充值以設定懸停時的背景大小。

當懸停在類別中時，更改背景顏色以匹配導航欄：

更改此代碼：

nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}

對此：

nav ul li a:hover {
margin-left: -60px;
padding:16px;
margin-right: 10px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;
}

關于填充的博客： https ://www.w3schools.com/css/css_padding.asp

uj5u.com熱心網友回復：

我沒有時間跟蹤您的代碼，但您可以使用此代碼并根據需要進行更改：

<!DOCTYPE html>
<html>

<head>
    <title> Responsive Navigation Menus with Social Media</title>
    <meta name="viewport" content="width=device-width, initial- 
     scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font- 
     awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    
    <script>
    $(document).ready(function () {
        $(".toggle-nav").click(function () {
            $(".menu ul li").slideToggle("slow");
        });
    });
    </script>

    <style>
    body {
        margin: 0;
        padding: 0;
        font-family: arial;

    }

    .menu {
        width: 100%;
        background: #333;
        overflow: auto;
    }

    .menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 70px;
    }

    .menu ul li {
        float: left;
    }

    .menu ul li a {
        text-decoration: none;
        width: 100px;
        display: block;
        text-align: center;
        font-size: 15px;
        text-transform: uppercase;
        font-weight: bold;
        color: #fff;
    }

    .menu ul li a:hover {
        background: #6666ff;
    }

    .menu ul li a.active {
        background: orange;
    }

    .toggle-nav {
        color: #fff;
        text-decoration: none;
        display: none;
    }

    .social {
        float: right;
        margin-right: 100px;
        line-height: 70px;
    }

    .social a {
        max-width: 50px;
        text-align: center;
    }

    .social a i {
        font-size: 20px;
        background: #fff;
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: #000;
        border-radius: 50%;
        margin: 5px;
    }

    .social a i:hover {
        background: #6666ff;
        color: #fff;
    }

    @media(max-width:800px) {
        .toggle-nav {
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            padding: 10px 0px 10px 0px;
            background: #6666ff;
            width: 100%;
            display: block;
        }

        .menu ul li a {
            width: 100%;
        }

        .menu ul li {
            float: none;
            width: 100%;
            display: none;
            ;
        }

        .social {
            width: 100%;
            text-align: center;
            border-top: 1px solid #fff;
            float: none;
        }
    }

    @media(min-width:850px) {
        .menu ul li {
            display: block !important;
        }
    }
</style>


</head>

<body>
<nav class="menu">
    <a class="toggle-nav" href="#">&#9776;</a>
    <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="social">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
        <a href="#"><i class="fa fa-linkedin"></i></a>
       </div>
    </nav>
</body>

</html>

uj5u.com熱心網友回復：

你需要了解很多點，比如在哪里使用浮動、負邊距以及不應該在懸停狀態下復制相同的代碼，我洗掉了其中一些并添加了一些基本樣式，你的導航欄很好。您還可以查看此 codepen 鏈接https://codepen.io/shahilparichay/pen/OJOJMpj

body {
  margin: 0;
  padding: 0; 
  box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
}

nav {
width: 100%;
background-color: gray;
}

nav ul {
/* float: left; */
}

nav ul li {
/* float: left; */
list-style: none;
position: relative;
 display: inline-block;
}

nav ul li a {
margin-left: 0px;
padding: 15px 10px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}

nav ul li a:hover {
color: white;
background-color: lightblue;
}

nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 15px;
border-radius: 4px;}

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

nav ul li ul li {
width: 180px;
border-radius: 4px;}

nav ul li ul li a {
padding: 10px 10px 10px 10px;
}

/*top right bottom left*/
nav ul li ul li a:hover {    
color: white;
background-color: lightblue;  

}

  <nav>
    <ul>
        <li><a href='#'>Thuispagina</a></li>
        <li><a href='#'>Religie</a>
            <ul>
                <li><a href='#'>Christendom</a>
                <li><a href='#'>Islam</a>
                <li><a href='#'>Boedhisme</a>
            </ul>
        </li>
        <li><a href='#'>Interview</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
</nav>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421156.html

標籤：

上一篇：在div的大綱中休息一下

下一篇：無法通過道具改變BG顏色