Javascript 作为块的下拉菜单
我正在尝试修复我的下拉菜单项。当我将鼠标悬停在它们上方时,它只高亮显示文本,而不是整个元素。我试过内联块和块,但似乎无法改变它 以下是相关的php/html:Javascript 作为块的下拉菜单,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我正在尝试修复我的下拉菜单项。当我将鼠标悬停在它们上方时,它只高亮显示文本,而不是整个元素。我试过内联块和块,但似乎无法改变它 以下是相关的php/html: <div class="navigation w3-container clearfix"> <ul class="topnav" id="myTopnav"> <?php $query = "SELECT * FROM categories";
<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()'>☰</a></li>";
?>
</ul>
</div>
我附上了一张图片来解释这个问题,您可以看到,它只是一个下拉列表,没有突出显示整个框:
对这一切都很陌生,并且努力学习,所以感谢你们所有的帮助
编辑:这是源代码/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()'>☰</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()">☰</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 © 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>
-->
网站开发
正文,html{
身高:100%;
}
h1{
填充:0;
保证金:0;
}
.标题{
/*背景色:#434A54*/
背景色:#00001a;
垫底:20px;
宽度:100%;
}
.标志{
填充顶部:25px;
浮动:左;
}
.标志h1{
保证金:自动;
字体大小:粗体;
字号:1.5em;
颜色:白色;
}
.搜索{
填充顶部:20px;
浮动:对;
}
.内容盒{
背景色:#EEEEEE;
左侧填充:10px;
垫面:5px;
垫底:5px;
}
/*从列表中删除边距和填充,并添加黑色背景色*/
ul.topnav{
列表样式类型:无;
保证金:0;
填充:0;
位置:相对位置;
}
/*将列表项并排浮动*/
ul.topnav li{float:左;}
/*设置列表项内链接的样式*/
ul.topnav li a{
显示:内联块;
颜色:#F2F2;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
过渡:0.3s;
字体大小:14px;
右边框:1px实心#00001a;
}
#贵族{
边界权:无;
}
#分类权{
浮动:对;
}
#拉斯特利{
边界权:无;
}
.导航{
背景色:#333;
}
#后勤图像{
垫底:8px;
高度:25px;
}
.清楚{
明确:两者皆有;
}
马金托普先生{
边缘顶部:10px;
}
.意外事件{
身高:100%;
边框:1px纯灰;
文本对齐:居中;
}
.灯箱{
高度:70像素;
背景色:红色;
利润底部:3倍;
}
.布告栏{
高度:70像素;
背景颜色:粉红色;
}
/*更改悬停时链接的背景色*/
ul.topnav li a:hover{背景色:红色;}
/*隐藏包含应在小屏幕上打开和关闭topnav的链接的列表项*/
ul.topnav li.icon{显示:无;}
@媒体屏幕和屏幕(最大宽度:680px){
/*ul.topnav li:not(:第一个子项){display:none;}*/
ul.topnav li{显示:无;}
ul.topnav li.icon{
浮动:对;
显示:内联块;
}
}
/*当用户单击图标时,“responsive”类将通过JavaScript添加到topnav中。这个类使topnav在小屏幕上看起来很好*/
@媒体屏幕和屏幕(最大宽度:680px){
ul.topnav.responsive{位置:相对;}
#分类权{
浮动:无;
}
ul.topnav.responsive li.icon{
位置:绝对位置;
右:0;
排名:0;
}
ul.topnav.li{
浮动:无;
显示:内联;
}
ul.topnav.lia{
显示:块;
文本对齐:左对齐;
边界:无;
}
}
李安,.dropbtn{
颜色:白色;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
}
li a:悬停,.下拉:悬停.dropbtn{
背景色:红色;
显示:内联块;
}
li.下拉列表{
z指数:1000;
显示:块;!重要
}
.下拉内容{
显示:无;
位置:绝对位置;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
}
.下拉内容a{
颜色:黑色;
填充:12px 16px;
文字装饰:无;
文本对齐:居中;
}
.下拉:悬停.下拉内容{
背景色:#333;
显示:块;
}
.下拉内容a:悬停{背景色:#333;
}
.下拉:悬停.下拉内容{
显示:块;!重要
}
这里的标志
-
-
-
最新更新
地方新闻
通过
2016-09-01
大家好。该网站正在取得进展
通过
2016-08-02
<!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()'>☰</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()">☰</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 © 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>
-->
.dropdown-content a {
display:block;
box-sizing:border-box;
width:100%;
}