Как создать выпадающее меню, не нарушая остальную часть кода ....?

Question

Я знаю, что этот вопрос задан раньше, чем, вероятно, миллион раз, но я не могу найти ответ или решение, которое соответствует моей точной ситуации или коду. (Если есть, напишите мне!)

Я просто пытаюсь создать простое выпадающее меню в горизонтальной навигации, имеющее изображение логотипа с ссылками по обе стороны. У меня есть bootstrap, но я не могу представить простой способ закодировать его, используя их фреймворк, поэтому я сказал, закрутил его и построил с нуля.

Это не обязательно должно быть прямое html/css, но я не очень хорошо знаком с js (все еще изучая).

Вот мой текущий код:

#header { 
 
    height: 40px; 
 
    position: relative; 
 
    margin: 80px auto 0; 
 
} 
 

 
#header ul { 
 
    margin: 0 auto; 
 
    width: 800px; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
#header ul li { 
 
    float: left; 
 
    width: 97px; 
 
} 
 

 
#header ul li:nth-of-type(4) { 
 
    margin-left: 217px; 
 
} 
 

 
#header ul li a { 
 
    text-transform: lowercase; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 12px 0 0 0; 
 
    height: 28px; 
 
    color: #000; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition:.5s; 
 
} 
 

 
#header ul li a:hover { 
 
    color: #c4c4c4; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin: -60px 0 0 -124px; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    .logo { 
 
    bottom: 100%; 
 
    } 
 

 
    #header ul li:nth-of-type(4) { 
 
    margin-left: 0; 
 
    } 
 
    
 
    #header ul { 
 
    width: 600px; 
 
    position: relative; 
 
    } 
 
}

<div id="header"> 
 
     <a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="Whatever Photography" height="140" width="230" /></a> 
 
     <ul> 
 
      <li><a href="">About</a></li> 
 
      <li><a href="">Galleries <span class="caret"></span></a></li> 
 
       <ul class="sub-menu"> <!--if you comment out the sub-menu, you'll see the navigation as I want it to look--> 
 
        <li><a href="">Portraits</a></li> 
 
        <li><a href="">Landscapes</a></li> 
 
        <li><a href="">Personal</a></li> 
 
       </ul> 
 
      <li><a href="">Blog</a></li> 
 
      <li><a href="">Info/Rates</a></li> 
 
      <li><a href="">Prints</a></li> 
 
      <li><a href="">Contact</a></li> 
 
     </ul> 
 
    </div>

Другой проблема Я сталкиваюсь, что при изменении размера моего окна просмотра на мобильный размер, изображение логотипа перемещается к верхней части навигационной панели ссылки и половина из них скрыты вне поля зрения. Хотя это целый отдельный вопрос ...

Answer 1

Я немного изменил ваш код, вы можете попробовать что-то вроде этого.

#header { 
 
    height: 40px; 
 
    position: relative; 
 
    margin: 80px auto 0; 
 
} 
 

 
#header ul { 
 
    margin: 0 auto; 
 
    width: 800px; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
#header ul li { 
 
    float: left; 
 
    width: 97px; 
 
} 
 

 
#header ul li:nth-of-type(4) { 
 
    margin-left: 217px; 
 
} 
 

 
#header ul li a { 
 
    text-transform: lowercase; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 12px 0 0 0; 
 
    height: 28px; 
 
    color: #000; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition:.5s; 
 
} 
 

 
#header ul li a:hover { 
 
    color: #c4c4c4; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin: -60px 0 0 -124px; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    .logo { 
 
    bottom: 100%; 
 
    } 
 

 
    #header ul li:nth-of-type(4) { 
 
    margin-left: 0; 
 
    } 
 
    
 
    #header ul { 
 
    width: 600px; 
 
    position: relative; 
 
    } 
 
    
 
    ul.sub-menu { 
 
     display: none; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: auto!important; 
 
     overflow: hidden; 
 
     padding: 0 1em; 
 
     z-index: 2; 
 
     background: white; 
 
     
 
    } 
 
    
 
    .sub-menu li { display: block; float: none!important; } 
 
    
 
    .more { position: relative; } 
 
    .more:hover .sub-menu { display: inline-block; }

<div id="header"> 
 

 
     <ul> 
 
      <li><a href="">About</a></li> 
 
      <li class="more"><a href="">Galleries <span class="caret"></span></a> 
 
       <ul class="sub-menu"> 
 
        <li><a href="">Portraits</a></li> 
 
        <li><a href="">Landscapes</a></li> 
 
        <li><a href="">Personal</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="">Blog</a></li> 
 
      <li>  <a class="logo"><img src="http://www.susanhudsonphotography.com/blog/wp-content/uploads/p4/images/logo_1368744984.jpg" alt="Whatever Photography" height="140" width="230" /></a></li> 
 
      <li><a href="">Info/Rates</a></li> 
 
      <li><a href="">Prints</a></li> 
 
      <li><a href="">Contact</a></li> 
 
     </ul> 
 
    </div>