Hassan Nasir Hassan Nasir - 3 months ago 16
HTML Question

Dropdown menu as a block

I'm trying to fix my drop down menu items. When I hover over them, it only highlights the text and not the whole element. I have tried inline-block and block but cant seem to get it to change.

Here is the relevant 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>


Here is the relevant styling:

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
}


I have attached a picture to explain the issue, as you can see it's only the drop down where it does not highlight the whole box:

Picture

Really new to all of this and trying hard to learn so thank you for all the help guys!

EDIT: HERE IS THE SOURCE CODE/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

You need to give your anchor element a width:

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

Example bootply

Also please note, your code has multiple duplicate ids - ids should be unique

and your dropdown content links should really being in a child ul (to be more semantically correct):

<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