IssueTo make my website responsive for mobile layout, I am trying to make the navigation menu appear on clicking the menu button. However, the click is not working and navigation options are not appearing at all. Only the navigation menu icon is appearing. The options are appearing below the menu button separately. However, I want them to appear on clicking the menu icon.
.navbar {
width: 100;
text-align: center;
height: 20px;
padding: 35px;
font-size: 10px;
overflow: hidden;
}
.navbar a {
float: left;
font-size: 18px;
text-align: center;
padding: 12px 16px;
text-decoration: none;
color: #0069BD;
font-family: Helvetica;
}
.navbar .current{
border-bottom: 3px solid #0069BD; /* Showing the border under the navigation option on hover */
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
background-color: inherit;
font-family: Helvetica;
margin: 0;
color: #0069BD;
}
.navbar a:hover, .dropdown:hover .dropbtn {
border-bottom: 3px solid #00A0EF;
}
.navbar a {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0069BD;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
font-size: 10px;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 17px;
}
.dropdown-content a:hover {
border-bottom: 3px solid #00A0EF;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
color: white;
}
.show {
display: block;
}
.active {
color: white;
}
.content p{
font-size: 13px;
color: #4e5153;
font-weight: normal;
font-family: 'Arial' sans-serif;
line-height: 20px;
display:inline-block;
}
/* Header Logo */
header div.logo {
padding-top: 14px;
padding-right: 24px;
float: left;
border: red;
}
header div.logo a {
width: 216px;
height: 74px;
float: left;
text-indent: -999em;
}
div.page {
min-height: 400px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
<html><!-- head --><head profile="http://www.w3.org/2005/10/profile"> <!-- image displayed on the tab alongwith the title-->
<link rel="icon" type="image/png" href="images/logo.jpg"> <!-- image displayed on the tab alongwith the title-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- encoding scheme-->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Marvel Tech</title> <!--title of the tab-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!--icons used in footer-->
<link rel="stylesheet" href="style.css"> <!--stylesheet Linking-->
<script src="jquery.min.js"></script> <!-- javascript used for slider animation-->
<script type="text/javascript" src="slider.js"></script> <!-- javascript used for slider animation-->
</head>
<!-- Body-->
<body>
<div class="page-wrap">
<!--- Header section -->
<header>
<div class="headercontent">
<div class="logo">
<img src="images/newlogo.jpg" style="height: auto;">
</div>
<!--–– Navigation Bar -->
<div class="navbar">
<a class="current" href="Marvel_Tech.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Design
Consulting
R&D
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Software
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
Steam Turbine Design Package
Gas Turbine Design Tools
Power Plant Monitoring
Prognostic System
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
ORC Turbine
Gas Turbine
Saturated Team Turbine
</div>
</div>
About
Contact
<div class="dropdown">
<button class="dropbtn">Language
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<img src="images/english.png" style="height: auto;"> English
<img src="images/chinese.png" style="height: auto;"> Chinese <!--- Mention the name of chinese page in place of hash.-->
</div>
</div>
</div>
</div>
</header></div>
<div class="mobilenavbtn">
<div class="content">
<img src="images/mobilenavbtn.png" alt="Menu" style="height: auto;">
</div>
</div>
</body>
</html>
Step 1) Create HTML:
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
Step 2) Create CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
Related
I have a navigation menu on mobile which is a select field with some Javascript to redirect to the data-href attribute.
<select>
<option value="" data-href="/somepage">Some page</option>
<option value="" data-href="/anotherpage">Another page</option>
</select>
My question is pretty simple: Would it be preferred to wrap a navigation menu of this kind in a <nav> tag?
The nav element defines a set of navigation links.
In your case you seem to have all links in the same select.
If you are using only one select, then I should not use the nav element.
In case you have multiple selects, you can use the nav element to make them into a set.
My question to you is why even use the select elements?
You could make it much easier by using:
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Somepage
Another page
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
How would you align the items in the navbar? I tried using text-align: center but to no avail
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="navbar">
<div class="dropdown" id="one">
<button class="dropbtn">A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
Protip: Don't use floats. They're a dated and troublesome technique with very few legitimate modern uses.
Instead, use text alignment, automatic side margins, or flexbox.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox.
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex; /* <---------------------------------- HERE */
justify-content: center; /* <------------------------ HERE */
}
.navbar a {
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="navbar">
<div class="dropdown" id="one">
<button class="dropbtn">A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
Make a div named center
and make it an inline-block
.center{
display: inline-block;
}
Then cover all your drop downs with it like here bellow
<div class="center">
<div class="dropdown" id="one">
<button class="dropbtn">
A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">
B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">
C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
then add to your css text align center to .navbar
.navbar {
overflow: hidden;
background-color: #333;
text-align:center
}
now it will center the div class .center and your dropdown menu items wil always be centered
there are other ways to do it but this looks like the best if you dont declare the width of your div
Under here is the correct full code snippet
body {
font-family: Arial, Helvetica, sans-serif;
}
.center {
display: inline-block;
}
.navbar {
overflow: hidden;
background-color: #333;
text-align: center
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="navbar">
<div class="center">
<div class="dropdown" id="one">
<button class="dropbtn">
A
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="two">
<button class="dropbtn">
B
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" id="three">
<button class="dropbtn">
C
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
My navbar is disappearing every time I try the position:fixed. I've gone through similar questions and I still can't figure it out. For that matter, the only position that is working is the position:static, all the other ones will mess up the dropdown bar or just won't show up. I'm basically just trying to make a sticky header.
.navbar {
overflow: hidden;
background-color: white;
padding: 20px 10px;
width:100%;
height: 74px;
}
/* Style the header links */
.navbar a {
float: left;
color: #9c9c9c;
text-align: center;
padding: 12px 20px;
text-decoration: none;
font-size: 20px;
line-height: 25px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.navbar a.logo {
font-size: 25px;
font-weight: bold;
}
.dropdown:hover .dropbtn {
border-bottom: 5px solid #002873;
}
/* Float the link section to the right */
.navbar-right {
float: right;
}
.navbar-icon {
float: right;
padding: 1px;
}
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
text-align: left;
}
.navbar-right {
float: none;
}
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
background-color: inherit;
font-family: inherit;
margin: 0px;
padding: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 1;
margin: 0px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
color: black;
border-bottom: 0px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<div class="navbar">
<a href="home.html" class="title" style="font-weight:bolder; font-size:40px; color:#002873" > ExhibitLab </a>
<div class="navbar-right">
<div class="dropdown">
<button class="dropbtn"> About </button>
<div class="dropdown-content">
History
Timeline
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Publication </button>
<div class="dropdown-content">
Report
Additional Sources
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Research </button>
<div class="dropdown-content">
Thesis
Context
Global Implications
Mathematical Proof
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Model </button>
<div class="dropdown-content">
2D Model
SketchUp Model
Economic Model
Environmental Model
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Exhibit </button>
<div class="dropdown-content">
Preview
Location
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Media</button>
<div class="dropdown-content">
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Team</button>
<div class="dropdown-content">
Leading Professor
PhD Students
Grad Researchers
Undergrad Researchers
Additional Support
</div>
</div>
<div class = "navbar-icon">
mail_outline
<a href="#search" class="material-icons" style="font-size:20px" >search</a>
</div>
</div>
</div>
</header>
Bootstrap provides a class for fixing your navbar at the top of your screen 'navbar-fixed-top'.
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"></div></nav>
https://getbootstrap.com/docs/3.4/components/#navbar-fixed-top
Try setting the position property in the header element instead the .navbar:
header {
position: fixed;
}
I have a requirement where I need to have a navigation bar on mobile view which displays a few links. These links are parent pages and will need to display the child pages underneath them on click. I need the parent menu to be hidden while the child sub menus are shown. On clicking a back button, need to show the parent menu links. Can anyone give me some ideas on how to implement this.
I've created the pages as a LI under a UL and added new UL under a LI to create a child page list.
<nav>
<ul>
<li>
<a>A</a>
<ul>
<li>
<a>aa</a>
<a>ab</a>
<a>ac</a>
</li>
</ul>
</li>
</ul>
</nav>
So my requirement is to show aa,ab,ac when A is clicked and hide the menu showing A and just shown aa,ab and ac. When back button is clicked, I need to show menu with A and hide menu with aa,ab and ac
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
</html>
I have an issue after my web went live.
I am using WebStorm and during localhost check everything was ok, all elements were on the same level.
In the menu bar Photo section shifted down.
I have a dropdown.ccs file to format the dropdown list.
What might be the issue?
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/dropdown.css">
<link rel="stylesheet" type="text/css" href="css/crossfade.css">
<link rel="stylesheet" href="src/css/bootstrap.min.css"/>
<title>Feanor Studio</title>
</head>
<body>
<div id="top">
<div id="menu-bar">
<ul>
<li id="selected">Home</li>
<li class="dropdown">
<p class="dropbtn">Photo</p>
<div class="dropdown-content">
Fashion portraits
Art portraits
Car photography
Product photography
Interior photography
</div>
</li>
<li>Paintings</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
<div id="images">
<div id="crossfade">
<img class="bottom img-responsive" src="images/main/1.jpg" alt="Image 1">
<img class="top img-responsive" src="images/main/2.jpg" alt="Image 2">
<img class="top img-responsive" src="images/main/3.jpg" alt="Image 3">
<img class="top img-responsive" src="images/main/4.jpg" alt="Image 4">
<img class="top img-responsive" src="images/main/5.jpg" alt="Image 5">
</div>
</div>
</body>
</html>
Remove your <p></p> tags from the Dropdown and use <a> tags:
<li class="dropdown">
Photo
<div class="dropdown-content">
Fashion portraits
Art portraits
Car photography
Product photography
Interior photography
</div>
</li>
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/dropdown.css">
<link rel="stylesheet" type="text/css" href="css/crossfade.css">
<link rel="stylesheet" href="src/css/bootstrap.min.css"/>
<title>Feanor Studio</title>
</head>
<body>
<div id="top">
<div id="menu-bar">
<ul>
<li id="selected">Home</li>
<li class="dropdown">
Photo
<div class="dropdown-content">
Fashion portraits
Art portraits
Car photography
Product photography
Interior photography
</div>
</li>
<li>Paintings</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
<div id="images">
<div id="crossfade">
<img class="bottom img-responsive" src="images/main/1.jpg" alt="Image 1">
<img class="top img-responsive" src="images/main/2.jpg" alt="Image 2">
<img class="top img-responsive" src="images/main/3.jpg" alt="Image 3">
<img class="top img-responsive" src="images/main/4.jpg" alt="Image 4">
<img class="top img-responsive" src="images/main/5.jpg" alt="Image 5">
</div>
</div>
</body>
</html>