Question

我的网站上有一个下拉菜单，它的代理错误，下拉列表有效，但它会在我的整个网站徘徊时转移。

#nav {
}
#nav {
    background: none repeat scroll 0 0 #585858;
    border-radius: 3px;
    height: 50px;
    margin-bottom: 10px;
    padding: 0;
}

#searchbar input[type=text] { 

    background: none repeat scroll 0 0 #fff;
    border: 1px solid black;
    height: 25px;
    padding: 1px 1px 1px 5px;
    width: 230px;


}

#searchbar input[type="submit"] {
    background: none repeat scroll 0 0 #1abc9c;
    border: 1px solid #12ab8d;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 15px;
}

#searchbar { margin-right:10px; }



#nav ul {
    list-style: none outside none;
    margin: 0;
padding: 0 0 0 10px;
}

#nav ul li {
line-height:50px;
float:left;
}

#nav ul li a {
line-height:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:400;
text-decoration:none;
color:#FFF;
background-color:none repeat scroll 0 0 #585858;
display:block;
padding:0 20px;
}


#nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    #nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        #nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            #nav ul ul li a:hover {
                background: #4b545f;
            }


#nav ul li a:hover {
background-color:#333;
}

#nav ul li a.active {
background-color:#333;
}
#nav ul li active {
background-color:red;
}

li.active {
    float: right !important;
}
li.active_messages {
    float: right;
}
#nav ul>li:hover>ul {
  top:initial;
}

我的HTML

<div id="nav"> 

<ul>
<li><a href="index.php">Home</a></li>
<li><a href="categories.php">Categories</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>

<li><a href="about.php">About us</a></li>
<li><a href="my_profile.php">Profile</a></li>
<li><a href="my_parts.php">My Listings</a></li>
<li><a href="verification.php">Get Verified!</a></li>
<li><a href="logout.php">Log out</a></li>
<li class="active">
<div id="searchbar">  
<form action="search.php" method="get">
<input type="text" hidden="" value="product/search" name="route">
<input type="text" required="" placeholder="Search..." name="search">
<input type="submit" value="Search">
</form>
</div></li>
</ul>

</div>

只有在没有侧边推车的情况下全屏显示时才会出现问题。感谢即将到来的帮助。

感谢大家即将提供的帮助和支持。

Answer 1

甚至没有看你的代码，我可以告诉你为什么。下拉列表的宽度向右移动一些边距，导致搜索栏和下拉列表下方的任何其他内容向右移动。

只需创建一个<ul> list-style-type：none;使用<li>显示：内联或阻止;

此外，您没有为搜索栏设置宽度，这可能是另一个原因。尝试为导航设置宽度。

Answer 2

嘿，现在就像这样定义一些css

    #nav ul li {
    position:relative;
    }

#nav ul > li ul{
  display:none;
}
#nav ul li:hover ul{
  display:block;
}

Answer 3

DEMO

你为什么要给予最高分：100％;

  #nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; display:none;
    }

    #nav ul>li:hover>ul {
      display:block;
    }

更新：保持突出显示的DEMO

#nav ul li:hover > a{
background-color:#333;
}

Answer 4

为#nav和宽度100％提供最大宽度

#nav{
    background: none repeat scroll 0 0 #585858;
    border-radius: 3px;
    height: 50px;
    margin-bottom: 10px;
    max-width: 858px;
    padding: 0;
    width: 100%;
}

这样它就不会再动了。

css下拉菜单转移网站

4 个答案: