将下拉菜单添加到导航栏中

-1

我很难将下拉菜单添加到我的导航栏中，而无需过多地更改CSS。我正在试图做几个小时，现在我失败了。将下拉菜单添加到导航栏中

当我更改HTMl或在CSS中添加块时，导航栏已损坏，请指导我如何在将鼠标悬停在nabar上时添加滑动条的最佳或最简单的方法是什么？

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    max-width: 940px; 
 
    margin: 0 auto; 
 
    padding: 5px; 
 
} 
 

 
.jumbotron { 
 
    background: url(http://www.mathiasgerlach.com/data/files/2013/09/Vaillant_02.jpg) center; 
 
    background-size: cover; 
 
    height: 300px; 
 
} 
 

 
.header { 
 
    background-color: #333; 
 
} 
 

 
.nav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 20px 0; 
 
    letter-spacing: 1.6px; 
 
} 
 

 
.nav li { 
 
    transition: 0.4s; 
 
    color: #fff; 
 
    display: inline; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 600; 
 
    font-size: 12px; 
 
    margin-right: 25px; 
 
    text-transform: uppercase; 
 
} 
 

 
.nav li:hover { 
 
    background-color: #ffffff; 
 
    color: #333; 
 
    font-weight: 900; 
 
    padding: 24px 10px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 

 

 
} 
 

 
.activeBold { 
 
    font-weight: bold; 
 
} 
 

 
.main { 
 
    position: relative; 
 
    top: 180px; 
 
    text-align: center; 
 
} 
 

 
.main h1 { 
 
    color: #333; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 600; 
 
    font-size: 70px; 
 
    margin-top: 0; 
 
    margin-bottom: 80px; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn-main { 
 
    background-color: #333; 
 
    color: #fff; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    letter-spacing: 1.3px; 
 
    padding: 16px 40px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn-second { 
 
    border: 1px solid #333; 
 
    color: #000; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 600; 
 
    font-size: 10px; 
 
    letter-spacing: 1.3px; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    margin-bottom: 20px;  
 
} 
 

 
.supporting { 
 
    padding-top: 80px; 
 
    padding-bottom: 100px; 
 
} 
 

 
.supporting .col { 
 
    float: left; 
 
    width: 33%; 
 
    font-family: 'Raleway', sans-serif; 
 
    text-align: center; 
 
} 
 

 
.supporting img { 
 
    height: 32px; 
 
} 
 

 
.supporting h2 { 
 
    font-weight: 600; 
 
    font-size: 23px; 
 
    text-transform: uppercase; 
 
} 
 

 
.supporting p { 
 
    font-weight: 400; 
 
    font-size: 14px; 
 
    line-height: 20px; 
 
    padding: 0 50px; 
 
    margin-bottom: 40px; 
 
} 
 

 
.clearfix { 
 
    clear: both; 
 
} 
 

 
.footer { 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding: 30px 0; 
 
} 
 

 
.footer p { 
 
    font-family: 'Raleway', sans-serif; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway:400, 600" rel="stylesheet"> 
 
    <link href="stylesheet.css" type="text/css" rel="stylesheet"> 
 
    <script type='text/javascript' src='script.js'></script> 
 
    <script src="jquery-3.1.1.min.js"></script> 
 
    <title>Smart-Home</title> 
 
    </head> 
 
<body> 
 

 
    <div class="header"> 
 
    <div class="container"> 
 
     <ul class="nav"> 
 
     <li>O firmie</li> 
 
     <li>Produkty</li> 
 
     <li>Nasi partnerzy</li> 
 
     <li>Kontakt</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div class="jumbotron"> 
 
    <div class="container"> 
 
     <div class="main"> 
 
     <h1>Smart Home</h1> 
 
     <a class="btn-main" href="#">ZŁÓŻ ZAMÓWIENIE</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="supporting"> 
 
    <div class="container"> 
 

 
     <div class="col"> 
 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQY1_mc6oM6PXGx6CW5qKsq_fmJqUjlqf_l37QSqQOTK5CLSv78"> 
 
     <h2>Realizacje</h2> 
 
     <p> Specjalizujemy się w Opis opis Opis opis Opis opis Opis opis Opis opis .</p> 
 
     <a class="btn-second" href="#">dowiedz się więcej</a> 
 
     </div> 
 

 
     <div class="col"> 
 
     <img src="https://www.iconexperience.com/_img/i_collection_png/512x512/plain/notebook.png"> 
 
     <h2>Oferta</h2> 
 
     <p>Opis opis Opis opis Opis opis Opis opis Opis opis </p> 
 
     <a class="btn-second" href="#">dowiedz się więcej</a> 
 
     </div> 
 

 
     <div class="col"> 
 
     <img src="https://www.iconexperience.com/_img/i_collection_png/256x256/plain/tools.png"> 
 
     <h2>Serwis</h2> 
 
     <p>Opis opis Opis opis Opis opis Opis opis Opis opis </p> 
 
     <a class="btn-second" href="#">dowiedz się więcej</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 

 
    <div class="footer"> 
 
    <div class="container"> 
 
     <p>&copy; Smart home 2017</p> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

来源

2017-02-21 stackmack

你的代码的一部分是故意要下拉 –

我想有下拉的：

– stackmack

您可以按照这背后的想法。

HTML

<div class="dropdown"> 
    <button class="dropbtn">Dropdown</button> 
    <div class="dropdown-content"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    </div> 
</div>

CSS

/* Dropdown Button */ 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
position: relative; 
display: inline-block; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 1; 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
display: block; 
} 

/* Change the background color of the dropdown button when the dropdown content is shown */ 
.dropdown:hover .dropbtn { 
background-color: #3e8e41; 
}

参考css dropdown menu

来源

2017-02-21 12:57:59

堆栈溢出是用于快速小型解决方案，不用于网站维护。请不要过度协助人员，因为这对开发人员来说是一项有偿工作！ –

对此我非常抱歉。现在我知道了。非常感谢@mazenelzoor –

将下拉菜单添加到导航栏中

回答

相关问题