Проблема с CSS приводит к тому, что весь навигатор опущен

У меня проблема с моим меню навигации. У меня есть 5 ссылок с одной ссылкой, требующей выпадающего меню. Когда я наводил курсор на раскрывающееся меню, вся навигационная панель падает, перетаскивая другие ссылки на тот же уровень, что и выпадающий элемент. Я искал мозг, чтобы понять, что вызывает это. Я не считаю его проблемой jQuery и больше связан с CSS. Любое руководство будет высоко оценено.Проблема с CSS приводит к тому, что весь навигатор опущен

HTML

......... 
<script type = "text/javascript" src="js/jquery.js"></script> 
    <script type = "text/javascript" src="js/dropdown.js"></script> 
</head> 
<body> 
    <div id="bodypage"> 
    <nav id = "navbar"> 
      <ul> 
       <li id= "listheader"><a href="index.php">Students Journal</a></li> 
       <li><a href="index.php">Blog</a></li> 
       <li><a href="aboutme.php">About Me</a></li> 
       <li><a href="#">Topics</a> 
        <ul> 
         <li>Coming Soon</li> 
        </ul> 
       </li> 
       <li><a href="contact.php">Contact</a></li> 
      </ul> 
     </nav> 

    <div id="wrapper"> 
     <section id = "mainsection"> 
.........

CSS

....... 
#navbar{ 
    background:#303030; 
    line-height:30px 
} 

#navbar ul li li{ 
background-color:#EE7621; 
display:none; 
z-index: 1000; 
} 

#navbar li{ 
    display:inline-block; 
    list-style:none; 
    font-weight:normal; 
    font-family: 'Lora', serif; 
} 

#listheader{ 
background-color:#EE7621; 
color:white; 
font-size: 1.5em; 
} 

#navbar a{ 
padding:1.250em 4.231em 1.250em 4.231em; 
display:inline-block; 
list-style:none; 
color:#F5F5F5; 
} 

#listheader a{ 
padding: 0.7em 4em .85em 4em; 
} 

#navbar a:hover{ 
color:#EE7621; 
} 

#listheader a:hover{ 
color:#FFF; 
} 
.......

JQuery

$(document).ready(function(){ 
$('li').hover(function(){ 
$(this).find('ul>li').stop().fadeToggle(100); 
}); 
});

источник

2013-08-29 Calgar99

Почему у вас есть масса мест в вашем HTML? Просто интересуюсь.

Привычка по существу. Это плохо? – Calgar99

Я думаю, проблема заключается в том, что выпадающий список все еще находится в потоке документа. Попытайтесь изменить это, используя позицию: absolute; – Jeffpowrs

Ваше выпадающее подменю должны быть расположены абсолютно (по отношению к его родителей).

Попробуйте изменить CSS к следующему:

#navbar ul > li { 
    position: relative; 
    display:inline-block; 
    list-style:none; 
    font-weight:normal; 
    font-family: 'Lora', serif; 
} 

#navbar ul > li > ul > li { 
    position: absolute; 
    left:25%; 
    bottom: -10px; 
}

источник

2013-08-29 17:51:38 Matt

Спасибо Мэтт. Это сработало отлично. – Calgar99

Рад, что смогли помочь! – Matt

Посмотрите:http://jsfiddle.net/techsin/sh7Gq/

Вы должны поместить в теме Li относительно

и положение ул внутри литий абсолютной.

.h ul{ position: absolute;} 
.h ul li{width:100px;} 
#navbar li{ 
    position:relative; 
.......

источник

2013-08-29 17:59:24

Спасибо Мухаммад. Ваш метод также работает – Calgar99

Проблема с CSS приводит к тому, что весь навигатор опущен

ответ

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