Выпадающее меню горизонтальное, а не вертикальное

Я пытался выяснить, как исправить это раскрывающееся меню. Кажется, что все в порядке, пока я не нахожусь, и меню появляется горизонтально, а не вертикально. Это что-то не так с css?Выпадающее меню горизонтальное, а не вертикальное

Благодарим за помощь!

JS Fiddle

HTML

<body> 
<div id="wrapper"> 
<div id="header"></div> 
<nav id="mainnav"><img src="../images/Website/banner.jpg" width="1280" height="120"> 
<ul style="list-style: none;"> 
     <li><a href="../index.html">Home</a></li> 
     <li><a href="../research.htm">Research</a></li> 
     <li><a href="../susantaylor.htm">Susan Taylor</a></li> 
     <li><a href="../LaboratoryMembers.html">Lab Members</a> 
      <ul> 
       <li><a href="../currentmembers.htm">Current Members</a></li> 
       <li><a href="../formermembers.htm">Former Members</a></li> 
       <li><a href="../gallery.htm">Gallery</a></li> 
      </ul> 
     </li> 
     <li><a href="../publications.htm">Publications</a></li> 
     <li><a href="../links.htm">Links</a></li> 
     <li><a href="../contact.htm">Contact Us</a></li> 
</ul> 
    </nav> 

    <br> 
</br> 
<div id= "content" align="center"> 
<br> 
<div id="content-spacer-top"> </div> 
    <div id="content-inner"> <!-- TemplateBeginEditable name="EditRegion3" -- >EditRegion3<!-- TemplateEndEditable --></div> 
    <div id="content-space bottom"></div> 

</div> 
<footer class="footer" id="footer"> 
    <div align="center"> 
    <p>Taylor Laboratory<br> 
     Leichtag Biomedical Research Building 
     4th Floor, Room 412 
    <br> 
    University of California, San Diego 
    <br> 
    9500 Gilman Dr. mc0654<br> 
    La Jolla, CA 92093 
    <br> 
    Ph: (858) 534-8190 
    <br> 
    Fax: (858) 534-8193 </p> 
</div> 
</footer> 


</div> 


</body>

CSS литий уль { дисплей: нет; }

li:hover ul{ 
    display:block; 
} 
body { 
    margin: 0px; 
    background-color: #CCCCCC; 
} 
.content { 
    background-color: #FFFFFF; 
    padding-right: 6px; 
    padding-left: 6px; 
} 
.footer { 
    background-color: #357f7f; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 8px; 
    color: #FFFFFF; 
    position: absolute; 
} 
#content { 
    background-color: #FFFFFF; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    min-height: 100%; 
    height: auto; 
} 


a { 
    text-decoration: none; 
} 
#wrapper { 
    background-color: #FFFFFF; 
    width: 1280px; 
    min height: 100%; 
    position: relative; 
    height: auto; 
    min-height: 100% 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
} 
#content-spacer-top { 
    height: 10px; 
} 

#content-spacer-bottom{ 
    height:1%; 
} 

#header { 
    background-color: #357f7f; 
    height: 2%; 
    width: 100%; 
} 
#mainnav a { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    color: #000000; 
    text-decoration: none; 
    background-color: #FFFFFF; 
    float: left; 
    text-align: center; 
    width: 14.28%; 
    padding-top: 6px; 
    padding-right: 0px; 
    padding-bottom: 6px; 
    padding-left: 0px; 
    display: block; 
    list-style-type: none; 
    clear: none; 
    margin: 0px; 
    height: 2%; 
    border-top-width: thin; 
    border-right-width: thin; 
    border-bottom-width: thin; 
    border-left-width: thin; 
    border-top-style: solid; 
    border-right-style: none; 
    border-bottom-style: solid; 
    border-left-style: none; 
    border-top-color: #357F7F; 
    border-right-color: #357F7F; 
    border-bottom-color: #357F7F; 
    border-left-color: #357F7F; 
} 
#mainnav ul { 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
} 

#mainnav a:hover,#mainnav a:active,#mainnav a:focus { 
color: #FFFFFF; 
text-decoration: none; 
background-color: #357F7F; 
} 
.style2 { 
font-size: small; 
color: #FFFFFF; 
} 

a:visited { 
color: #FFFFFF; 
background-color: #357F7F; 
} 
.style4 {font-size: x-small} 
.style5 {background-color: #357f7f; font-family: arial;} 
#footer { 
width:1280px; 
height:120px; 
float:left; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 10px; 
text-transform: uppercase; 
}

источник

2015-05-26 angela

Кажется, что вы прекрасно работаете над тем, что вы объяснили в своем вопросе, не могли бы вы пойти более подробно? – Jordan

https://jsfiddle.net/amchen/sqpe7ssp/ @jordan Извините. Я понимаю, что сценарий JS, который я опубликовал ранее, не точно изображает проблему, с которой я столкнулся. Надеюсь, новая связь поможет немного больше. Общая панель навигации горизонтальная, но выпадающее меню должно быть вертикальным. Вместо этого, когда я наводил курсор на «Члены лаборатории», выпадающее меню выглядит горизонтально, а не вертикально. Спасибо за вашу помощь! – angela

Хорошо, так что после того, как смотреть на обновленной скрипке я был в состоянии увидеть проблему сразу. Во-первых, ваш код действительно грязный (извините, но это ха-ха), и у вас так много ненужных объявлений css.

Было так плохо написано, что я только что написал новую скрипку и включил рабочий навигационный бар. Найдите соответствующий код ниже.

HTML:

<nav> 
    <ul> 
      <li><a href="../index.html">Home</a></li> 
      <li><a href="../research.html">Research</a></li> 
      <li><a href="../susantaylor.html">Susan Taylor</a></li> 
      <li><a href="../LaboratoryMembelrs.html">Lab Members</a> 
       <ul> 
        <li><a href="../currentmembers.html">Current Members</a></li> 
        <li><a href="../formermembers.html">Former Members</a></li> 
        <li><a href="../gallery.html">Gallery</a></li> 
       </ul> 
      </li> 
      <li><a href="../publications.html">Publications</a></li> 
      <li><a href="../links.html">Links</a></li> 
      <li><a href="../contact.html">Contact Us</a></li> 
    </ul> 
</nav>

CSS:

nav { 
    display: table; 
    border-top: 1px solid #357F7F; 
    border-bottom: 1px solid #357F7F; 
} 
nav ul { 
    display: table-row; 
    position: relative; 
    margin: 0; 
    padding: 0; 
    z-index: 1; 
} 
nav ul a { 
    display: block; 
    color: black; 
    text-decoration: none; 
    padding: 10px 15px; 
    font-family: Arial, Helvetica, sans-serif; 
} 
nav ul li { 
    position: relative; 
    display: inline-block; 
    display: table-cell; 
    width: 1%; 
    list-style-type: none; 
    text-align: center; 
} 
nav ul li:hover { 
    background-color: #357F7F; 
} 
nav ul li:hover a { 
    color: white; 
} 
nav ul ul{ 
    display: none; 
    position: absolute; 
    background: rgba(0,0,0,0.4); 
    width: 100%; 
} 
nav ul ul li { 
    width: 100%; 
    display: inline-block; 
} 
nav ul li:hover > ul { 
    display: block; 
}

JSFiddle

Надеется, что это помогает! :)

источник

2015-05-28 22:15:53 Jordan

Hello Jordan. Спасибо! Я только начал изучать его самостоятельно, так что это определенно работа и прогресс. Я не забуду отправить вам ссылку на веб-сайт, как только это будет сделано, чтобы вы могли видеть это, если хотите. Еще раз спасибо ~! – angela

Нет проблем, извините, если мой первоначальный ответ натолкнулся на то, что я был груб, это было не мое намерение. Если вам нужна дополнительная помощь, не стесняйтесь добавлять меня в Skype (ответьте, если да). Вы определенно хотите идти по быстрому пути с вашим сайтом, но помните об этом :) – Jordan

Я бы определенно оценил это. Это уже, но есть определенные проблемы с дизайном, которые я хотел бы исправить (например, добавить раскрывающееся меню и галерею изображений). Он устарел еще 5 лет, пока я не успел обновить весь сайт. Не стесняйтесь смотреть. Любая конструктивная критика приветствуется :) http://susantaylorlab.ucsd.edu/ – angela

Выпадающее меню горизонтальное, а не вертикальное

ответ

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