Question

我正在尝试修复下拉菜单项。当我将鼠标悬停在它们上面时，它只突出显示文本，而不是整个元素。我尝试过内联块和块但似乎无法改变它。

这是相关的php / html：

<div class="navigation w3-container clearfix">
    <ul class="topnav" id="myTopnav">
        <?php
            $query = "SELECT * FROM categories";
            $select_all_categories_query = mysqli_query($connection, $query);

            while($row = mysqli_fetch_assoc($select_all_categories_query)) {

                $cat_title =   $row['cat_title'];
                $cat_position = $row['cat_position'];
                $cat_thumbnail = $row['cat_thumbnail'];
                $cat_image = $row['cat_image'];
                $cat_link = $row['cat_link'];
                $cat_dropdown = $row['cat_dropdown'];

                if($cat_dropdown=="no"){
                    echo "<li> <a href='{$cat_link}'>{$cat_title}</a></li>";   
                }
                else{
                    echo "<li class='dropdown'><a href='#' class='dropbtn'>Dropdown</a>
                            <div class='dropdown-content'>
                                <a href='#'>Link 1</a>
                                <a href='#'>Link 2</a>
                                <a href='#'>Link 3</a>
                            </div>
                        </li>";
                    }
            }

            echo "<li class='icon'><a id='lastli' href='javascript:void(0);' onclick='myFunction()'>&#9776;</a></li>";
        ?>
    </ul>
</div>

这是相关的造型：

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
    border-right: 1px solid #00001a;       
}

li a, .dropbtn {
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    z-index: 1000;
    display: block; !important      
}

.dropdown-content {
    display: none;
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    text-align: center;
}
     .dropdown:hover .dropdown-content{
             background-color: #333;
             display:block;
     }

.dropdown-content a:hover {
    background-color: #333;
}

.dropdown:hover .dropdown-content {
    display: block; !important
}

我附上了一张图片来解释这个问题，因为你可以看到它只是在没有突出显示整个方框的下拉菜单中：

对所有这一切都很新，并努力学习，谢谢你们所有的帮助！

编辑：这是源代码/ HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Website developing</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>


  <style>

 body, html {
  height: 100%;
}

h1{

    padding:0;
    margin:0;
}
    .header{


        /*background-color: #434A54;*/
        background-color: #00001a;
        padding-bottom:20px;



        width:100%;


    }

    .logo{

        padding-top:25px;
        float:left;


    }
    .logo h1{

        margin:auto;


        font-weight:bold;
        font-size:1.5em;
        color:white;




    }



    .search{

        padding-top:20px;
        float:right;

}

     .content_Box{


         background-color: #EEEEEE;
         padding-left: 10px;
         padding-top:5px;
         padding-bottom:5px;
     }


  /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;

    position: relative;


}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
    border-right: 1px solid #00001a;

}



#noBorder{
    border-right: none;  
}

#categoryRight{
    float:right;        
}

#lastli{
    border-right: none;
}

.navigation{

    background-color:#333;
}

#loginimage{
    padding-bottom:8px;
    height:25px;
}

.clear {
    clear: both;
}

.margintop{

    margin-top:10px;
}
.upcomingevents{

    height:100%;
    border:1px solid grey;
    text-align:center;

}

.highlightbox{

    height:70px;
    background-color:red;
    margin-bottom:3px;

}
.noticeboard{

    height:70px;
    background-color:pink;

}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: red;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
  /*ul.topnav li:not(:first-child) {display: none;} */
  ul.topnav li{display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}

#categoryRight{
        float:none;

        }



  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;

  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
    border:none;
  }
}



li a, .dropbtn {

    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
    display:inline-block;


}

li.dropdown {

    z-index: 1000;
    display: block; !important

}

.dropdown-content {
    display: none;
    position: absolute;


    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 


}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;

    text-align: center;


}
     .dropdown:hover .dropdown-content{

             background-color: #333;
             display:block;

     }

.dropdown-content a:hover {background-color: #333;
      }

.dropdown:hover .dropdown-content {
    display: block; !important



}    

  </style>







  <body> 

   <div class="header w3-container" >       
        <!-- <div class="col-md-4 col-md-offset-4"> -->
             <div class="col-md-8">
             <div class="logo">
                <h1> Logo here </h1>
            </div>
        </div>

        <div class="col-md-4 ">   

            <form action="search.php" method="post">
                <div class="input-group search">
                    <input name="search" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button name="submit" class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form><!-- search form -->

       </div>

   </div>

   <div class="navigation w3-container clearfix" >


            <ul class="topnav" id="myTopnav" >
                    <li> <a href='index.php'>Home</a></li><li> <a href='#'>Latest update</a></li><li> <a href='#'>SSC</a></li><li class='dropdown'><a href='#' class='dropbtn' >Dropdown</a>
                                                <div class='dropdown-content'>
                                                    <a href='#' id='noBorder'>Link 1</a>
                                                    <a href='#' id='noBorder'>Link 2</a>
                                                    <a href='#' id='noBorder'>Link 3</a>
                                                </div>
                                            </li><li class='dropdown'><a href='#' class='dropbtn' >Dropdown</a>
                                                <div class='dropdown-content'>
                                                    <a href='#' id='noBorder'>Link 1</a>
                                                    <a href='#' id='noBorder'>Link 2</a>
                                                    <a href='#' id='noBorder'>Link 3</a>
                                                </div>
                                            </li><li> <a href='#'>Other Exams</a></li><li> <a href='#'>Other Jobs</a></li><li id='categoryRight'><a id='noBorder' href='#'>Contact</a></li><li> <a href='#'><img id='loginimage'  src='images/genericperson.png'> login</a></li><li class='icon'>
                                   <a id='lastli' href='javascript:void(0);' onclick='myFunction()'>&#9776;</a>
                              </li>         
<!--                <li id="home"><a href="#home">Home</a></li>
                <li ><a href="#news"><img id="loginimage"  src="images/genericperson.png" > Log in</a></li>
                <li><a href="#contact">Contact</a></li>
                <li id="aboutli"><a id="aboutborder" href="#about">About</a></li>
                <li class="icon">
                    <a id="lastli" href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
                </li>
-->
            </ul>

   </div>   


    <!-- Page Content -->
    <div class="container mainContent">

        <div class="row">

            <!-- Blog Entries Column -->

            <div class="col-md-8">

               <h2 class="page-header">
                        Latest updates
                    <small>local news</small>
                    </h2>


               <div class="content_Box">    
                    <!-- First Blog Post -->
                    <h2>
                        <a href="#">First SSC post</a>
                    </h2>
                    <p class="lead">
                        by <a href="index.php">Hasman404</a>
                    </p>
                    <p><span class="glyphicon glyphicon-time"></span>2016-09-01</p>



                    <p>hola everyone. The site is getting somewhere!</p>
                    <a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
                    <hr>     



               <div class="content_Box">    
                    <!-- First Blog Post -->
                    <h2>
                        <a href="#">Second post on SSC</a>
                    </h2>
                    <p class="lead">
                        by <a href="index.php">Peter</a>
                    </p>
                    <p><span class="glyphicon glyphicon-time"></span>2016-08-02</p>



                    <p>Now were trying to spice things up abit by adding this here.Lets see if this looks good. Need to style it all. Page heading should be resticted to one.</p>
                    <a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
                    <hr>     


  <!--This function is responsible for your posts generation -->











            </div>

            <!-- Blog Sidebar Widgets Column -->


            <div class="col-md-4">




                <!-- Blog Search Well -->
   <!--             <div class="well"> -->
                    <h4>Blog Search</h4>
                    <form action="search.php" method="post">
                    <div class="input-group">
                        <input name="search" type="text" class="form-control">
                        <span class="input-group-btn">
                            <button name="submit" class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                    </form><!-- search form -->
                    <!-- /.input-group -->
     <!--           </div> -->





                <!-- Blog Categories Well -->
  <!--              <div class="well">  -->



                    <h4>Blog Categories</h4>
                    <div class="row">
                        <div class="col-lg-12">
                            <ul class="list-unstyled">
                            <li> <a href='#'>Home</a></li><li> <a href='#'>Latest update</a></li><li> <a href='#'>SSC</a></li><li> <a href='#'>Study Material</a></li><li> <a href='#'>Result</a></li><li> <a href='#'>Other Exams</a></li><li> <a href='#'>Other Jobs</a></li><li> <a href='#'>Contact</a></li><li> <a href='#'>login</a></li>                            
                            </ul>
                        </div>


                    </div>
                    <!-- /.row -->
           <!--     </div>  -->





                <!-- Side Widget Well -->

            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Footer -->

        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2016</p>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->


    <script>

   /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */

        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
            var y = document.getElementById("logo");
                y.className += " responsive";
            }

      </script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>



 <!--  
   <div class="container margintop clear">
        <div class="row">

            <div class="col-md-4">
                <div class="upcomingevents">
                    <h1> Upcoming events </h1>
                </div>

            </div>

            <div class="col-md-4">
                <div class="highlightbox">

                </div>
                <div class="highlightbox">

                </div>
                <div class="highlightbox">

                </div>

            </div>

            <div class="col-md-4">

                <div class="noticeboard">

                </div>

            </div>

        </div> <!-- Row ends here 

   </div>  
-->

Answer 1

您需要为锚元素赋予宽度：

.dropdown-content a {
  display:block;
  box-sizing:border-box;
  width:100%;
}

Example bootply

另请注意，您的代码有多个重复ID - ID应该是唯一的

你的下拉内容链接应该是一个孩子的ul（在语义上更正确）：

<ul class="topnav" id="myTopnav">
  <li> <a href="index.php">Home</a></li>
  <li> <a href="#">Latest update</a></li>
  <li> <a href="#">SSC</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <ul class="dropdown-content">
      <li><a href="#" class="noBorder">Link 1</a></li>
      <li><a href="#" class="noBorder">Link 2</a></li>
      <li><a href="#" class="noBorder">Link 3</a></li>
    </ul>
  </li>
</ul>

Updated bootply with first dropdown as ul

Answer 2

尝试将min-width属性赋予锚标记。增加最小宽度

下拉菜单作为一个块

2 个答案: