0

So I have a problem with my navigation menu. I have 5 links with one link requiring a drop down menu. When I hover over the drop down menu the whole navbar drops down dragging the other links to the same level as the drop down item. Ive been wracking y brain to figure what is causing this. I don't believe its a jQuery issue and more related to the CSS. Any guidance would be much appreciated.

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);
});
});
4

2 回答 2

2

您的下拉子菜单必须绝对定位（相对于它的父级）。

尝试将您的 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-29T17:51:38.267 回答
1

看看：http: //jsfiddle.net/techsin/sh7Gq/

您需要将主题 li 相对定位

并将 ul 定位在绝对的 li 中。

.h ul{ position: absolute;}
.h ul li{width:100px;}
#navbar li{
    position:relative;
.......
于 2013-08-29T17:59:24.080 回答