Css Dropdown Button в навигаторе

Хорошо, поэтому я пытаюсь изучить CSS, и я пытаюсь вставить раскрывающуюся кнопку в навигационной панели.Css Dropdown Button в навигаторе

Что происходит, когда я нажимаю кнопку, вся навигационная панель расширяется, а не только содержимое кнопки. Что я делаю не так? Благодаря!

ul { 
 
    list-style-type: none; 
 
    margin-left:8%; 
 
    margin-right: 8%; 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    overflow: hidden; 
 
    background-color: #f3f3f3; 
 
} 
 

 
.right{ 
 
    float: right; 
 
} 
 

 

 
li a { 
 
    float: left; 
 
    display: block; 
 
    color: #6f6f6f; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #e0e0e0; 
 
} 
 

 
p { 
 
    color: red; 
 
    margin-left: 8%; 
 
    margin-right: 8%; 
 
} 
 

 
body{ 
 
    font-family:Arial; 
 
    background-color:#f9f9f9; 
 
} 
 

 
.dropbtn { 
 
    background-color: #f3f3f3; 
 
    color: #6f6f6f; 
 
    padding: 14px 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

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

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    right: 0; 
 
    display: none; 
 
    position: relative; 
 
    background-color: #f9f9f9; 
 
    min-width: 10px; 
 
} 
 

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

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

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

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

<ul> 
 
    <li><a href="/"><img src="../../static/image/logoRect.png" width="25"> </a></li> 
 
    <li><a href="/movies">Movies</a></li> 
 
    <li><a class="right" href="">Search</a></li> 
 
    <div class="right"> 
 
    <div class="dropdown"> 
 
     <button class="dropbtn">Dropdown</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Links 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <li><a class="right" href="#about">Explore</a></li> 
 
</ul>

источник

2016-04-19 Miguel Antunes

вы можете положить в jsfiddle? – Giri

Вы должны указать высоту <ul> элемента, поэтому он не будет расширяться с выпадающим меню.

источник

2016-04-19 23:18:59 saison

Не знаете, почему это было приостановлено. Это верно. –

Вы должны указать высоту и удалить переполнение.

ul { 
list-style-type: none; 
margin-left:8%; 
margin-right: 8%; 
padding-left: 0; 
padding-right: 0; 
// overflow: hidden; <---remove 
height: 48px;   // <---add 
background-color: #f3f3f3; 
}

Если вы этого не сделаете, ул по умолчанию, как будто у него есть:

height: auto;

Соответствующие fiddle

источник

2016-04-19 23:21:06

Css Dropdown Button в навигаторе

ответ

Смежные вопросы