I have created a position:fixed; navbar at the top of my web page and one of its items is supposed to be a drop down list named "services" which is supposed to show the dropdown on hover but its not working.
Below is the HTML page code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>
</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li >
<a class="dropdown" href="">SERVICES</a>
<div class="dropdownlist">
AUDIT & ASSURANCE
TAXATION
CORPORATE FINANCE
SERVICES
MANAGEMENT CONSULTING
RISK MANAGEMENT
SECTORS
HUMAN RESOURCES
ACCOUNTING, AUDIT & TAX
</div>
</li>
<li>PARTNERS</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</body>
</html>
And here is the CSS stylesheet code:
body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
.nav li a:hover {
background-color:black;
}
.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover .dropdownlist {
display: block;
}
This code does not work because dropdownlist is not a child of dropdown, they're just adjacent elements so you need to use the + sign in order to achieve what you want.
Here's a working example:
body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
.nav li a:hover {
background-color:black;
}
.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover + .dropdownlist,
.dropdownlist:hover {
display: block;
}
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li >
<a class="dropdown" href="">SERVICES</a>
<div class="dropdownlist">
AUDIT & ASSURANCE
TAXATION
CORPORATE FINANCE
SERVICES
MANAGEMENT CONSULTING
RISK MANAGEMENT
SECTORS
HUMAN RESOURCES
ACCOUNTING, AUDIT & TAX
</div>
</li>
<li>PARTNERS</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</div>
Below is the code. hope this will help you.
body {
background-color:white;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
ul.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px; float:left;
}
ul.nav li {
float:left;
}
ul.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
ul.nav li a:hover {
background-color:black;
}
ul.nav li ul.dropdownlist {
display: none;
background-color: #ccc;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; right:0; top:38px;
}
ul.nav li:hover ul.dropdownlist {
display: block;
}
ul.nav li ul.dropdownlist li a {
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>
</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>
<a class="dropdown" href="">SERVICES</a>
<ul class="dropdownlist">
<li>AUDIT & ASSURANCE</li>
<li>TAXATION</li>
<li>CORPORATE FINANCE</li>
<li>SERVICES</li>
<li>MANAGEMENT CONSULTING</li>
<li>RISK MANAGEMENT</li>
<li>SECTORS</li>
<li>HUMAN RESOURCES</li>
<li>ACCOUNTING, AUDIT & TAX</li>
</ul>
</li>
<li>PARTNERS</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</body>
</html>
Below change will help you only to show drop down on hover but you need to make few CSS changes in order to display the drop down properly
You need replace the following CSS
.nav .dropdown:hover .dropdownlist {
display: block;
}
With
.nav .dropdown:hover + .dropdownlist {
display: block;
}
Related
nav
{
display: table;
width: 50%;
background-color: #333;
padding: 0.50em 0.5em;
margin: 0.60em auto;
}
nav ul
{
display: table-row;
}
nav ul li
{
display: table-cell;
text-align: center;
}
a
{
text-decoration:none;
color: #d9d9d9;
}
a:hover
{
color: #e6e6e6;
}
<nav>
<ul>
<li> art <li>
<li> download </li>
<li> <img src="image/symbol.png">
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
The above code is how I am so far designing my website; however, if I add the image in the middle of the bar, the bar widens to fit the image in it!
The answer has been posted, thanks again!
Try this
.navContain{
height:30px;
width:100%;
margin:0 auto;
background-color:red;
padding-top:30px;
}
nav{
width: 100%;
max-width:400px;
background-color: #333;
padding:0;
margin:0 auto;
overflow:visible;
height:30px;
}
nav ul{
overflow:visible;
height:30px;
margin:0;
padding:0;
}
nav ul li{
text-align: center;
overflow:visible;
height:30px;
margin:0;
padding:0;
list-style-type:none;
float:left;
width:20%;
max-width:80px;
}
a{
text-decoration:none;
margin:0;
padding:0;
color: #d9d9d9;
overflow:visible;
line-height:30px;
display:block;
position:relative;
}
a:hover{
color: #e6e6e6;
}
a img{
width:90%;
margin:0;
padding:0;
vertical-align:baseline;
position:absolute;
bottom:-30px;
right:5%;
left:5%;
}
<div class="navContain">
<nav>
<ul>
<li> art </li>
<li> download </li>
<li> <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></li>
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
</div>
I am new to css my dropdown menu is hiding behind the div please help me to find out the problem. my HTML and CSS code is:
<style>
*
{
margin:0px;
padding:0px;
}
body
{
background-color:mintcream;
}
#header
{
height:260px;
width:auto;
margin:5px;
}
#headerimg
{
height: 260px;
width:100%;
}
#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}
#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}
#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;
}
#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}
#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;
}
#wrap #menu ul li ul li
{
display:none;
}
#wrap #menu ul li:hover ul li
{
display:block;
}
#content
{
width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>
<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />
</div>
<div id="wrap">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Services
<ul>
<li>Food</li>
<li>Hospital</li>
<li>Medical</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
</div>
</body>
I am new to css. My dropdown menu is hiding behind the div. Please help me to find the problem.
Please add below css
ul {position: relative; z-index: 99999; }
Just add position:relative in "#wrap #menu ul li" . I think your problem was solved. If you have any other problem then put it here.
Thanks for asking.
This is the beginning of the HTML code. Notice I put the div"dropdown" in the element in order to add the drop down button into my fixed navigation bar I learned how to create before learning the dropdown button. Another issue with the added button is the hover on the other list items is not flush to the bottom of the nav bar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="main.css" rel="stylesheet"/>
<title>Vasilios Lambos</title>
</head>
<body>
<header role="banner">
<div id="fixed">
<nav role="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>
<div class="dropdown">
<button class="dropbtn">Process</button>
<div class="dropdown-content">
Research
Exploration
Testing
</div>
</div>
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<img src="IMG_1677.jpg" width="200" height="200"/>
<h1>Vaslios Lambos</h1>
<p>Industrial and Interaction Designer</p>
<p>Always staying hungry to learn new and inspiring ways to improve my creative process. I utilize design thinking, research methods, and ethonography to explore user experience and services. Core hard skills consist of user interface design, product rendering, and testing.</p>
</div>
<div class="pics">
<img src="VL-Logo.png" width="200" height="200"/>
</div>
<div class="info">
<div class="container">
<h3>Overview</h3>
<p> ### </p>
</div>
</div>
<div class="footer">
<h3>Soft & Hard skills</h3>
<ul>
<li>Adobe Suite</li>
<li>Axure RP</li>
<li>HTML/CSS/Javascript</li>
</ul>
</div>
</body>
</html>
Below is the CSS code for how to style the dropdown and below that you can find the #fixed class for the nav bar.
#charset "UTF-8";
#font-face {
font-family: Verdana, Geneva, sans-serif;
}
body {
font-family:Verdana, Geneva, sans-serif;
background-color: #FFF;
}
*{margin:0;padding:0;}
.dropbtn{
background-color: #999;
color:white;
padding: 20px;
font-size: 11px;
font-weight:bold;
border: none;
cursor: pointer;
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
z-index:-3;
}
.dropdown{
position:relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{
background-color:#3C6;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown:hover .dropbtn{
background-color:#3C6;
}
#fixed ul{
position:fixed;
top:0px;
width:100%;
z-index:9999;
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color: #999;
}
nav li{
float:left;
}
nav li a{
display:inline-block;
color: white;
font-size: 11px;
font-weight: bold;
padding:20px;
text-transform:uppercase;
text-decoration:none;
}
nav a:hover {
background-color: #3C6;
}
div.jumbotron {
margin-top:53px;
margin-left:auto;
margin-right:auto;
padding:10px;
height:500px;
max-width:100%;
color:white;
text-align:center;
background-color:#000
}
.jumbotron p{
width:500px;
margin-left:inherit;
margin-right:inherit;
}
.jumbotron img {
border-radius: 50%;
margin:inherit;
}
.pics{
/*float:right;*/
display:inline;
height:232px;
width:232px;
padding:0;
margin:0;
/*z-index:-1;*/
}
.pics img{
padding:15px;
border:1px solid #ccc;
background-color: #eee;
width:200px;
height:200px;
}
div.info {
max-width:100%;
background-color: #000;
color:white;
padding:20px;
height:400px;
}
div.footer{
max-width:100%;
background-color:#000;
color:white;
height:400px;
padding:20px;
}
i am using ul an li as menu list.I am able to change color of menu item in hover and visited link but on active state color is not changing, would you tell me what could be the solution for that problem?
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chandan</title>
<link rel="shortcut icon" href="../Resources/favicon.png" />
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services"><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
</body>
</html>
#css FIle*
#charset "utf-8";
/* CSS Document */
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a
{
color:#fcb1b1;
text-decoration:none;
}
li a:hover
{
color:#fff;
text-decoration:underline;
}
li a:active
{
color:#fff;
text-decoration:underline;
}
This might help
#menu_line .active a {
background-color:#FFD700;
}
here is my solution in css :
I have edited your code at styles and menu items
simply you must set class="active" to each li element you want to show active
I have added the class="active" to the service menu item.
HTML
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services" class="active" ><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
CSS
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a,
li a:hover,
li a:active {
color:#fff;
text-decoration:underline;
}
li.active a,
li.active a:hover,
li.active a:active {
background: #323637;
}
I have this nav menu:
http://jsfiddle.net/laziale/T45tD/4/
I want to know how I can fix the menu that the nav menu will be expandable with submenus. I entered some sample data.
Here is the source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="App_Themes/Main/style.css" />
<link type="text/css" rel="stylesheet" href="App_Themes/Main/reset.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="pagetop">
<div class="head pagesize">
<div class="head_top">
<div class="topbuts">
<ul class="clear">
</ul>
</div>
<div class="user clear">
<span class="user-detail">
</span>
</div>
<div class="logo clear">
<a href="#" title="Home">
<img src="Images/logo.jpg" class="picture" />
<span class="textlogo">
</span>
</a>
</div>
</div>
<div class="menu">
<ul class="clear">
<li class="active">Client
<ul>
<li class="subNav">Client Summary</li>
</ul>
</li>
<li>Agent
<ul>
<li class="subNav">Agent Summary
<ul>
<li class="subNav">Link1y</li>
<li class="subNav">Link2</li>
</ul></li>
</ul>
</li>
<li>System Utility
<ul>
<li class="subNav">Link1
<li class="subNav">Link2
<li class="subNav">Link3
</ul>
</li>
<li>Report</li>
<li>Maintenance</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
and the css:
body {
min-width:1000px;
text-align:center;
margin:0px;
font-family:Arial;
font-size:12px;
color:#666666;
background:#8D8D8D;
}
.pagetop {
width:100%;
min-width:1000px;
background-color: #333333;
border-bottom: 4px solid #007FAA;
position:relative;
z-index:100;
min-height:149px;
}
.head_top {
position:relative;
min-height:114px;
}
.topbuts {
position:absolute;
top:0px;
right:0px;
}
.topbuts ul {
float:right;
}
.topbuts li {
float:left;
margin-left:2px;
font-size:11px;
font-weight: bold;
}
.topbuts li a {
background:#007FAA;
text-decoration:none;
display:block;
color:#FFFFFF;
line-height:16px;
padding:1px 12px 2px 12px;
}
ol ul {
list-style:none;
}
.head {
padding:0px;
}
.pagesize {
width:1000px;
margin: 0px auto;
text-align:left;
}
.user {
clear:both;
float:right;
padding-top:27px;
}
.user-detail {
display: block;
float:right;
text-align:right;
}
.user-detail .name {
display: block;
line-height:normal;
text-align:left;
float:right;
font-size:18px;color:#FFFFFF;
padding:2px 0px 7px 0px;
}
.user-detail .text {
color: #bbbbbb;
clear:both;
font-size:11px;
line-height:18px;
color:#FFFFFF;
display:block;
}
.logo {
padding-top:20px;
}
.logo a {
text-decoration:none;
}
.logo .picture {
float:left;
margin-right:10px;
}
.logo .textlogo {
float:left;
}
.logo .title {
display:block;
font-family:Arial;
font-size:20px;
color:#FFFFFF;
font-weight: bold;
margin-top:5px;
letter-spacing: -0.02em;
}
.logo .text {
display:block;
font-weight: bold;
color: #BBBBBB;
position:relative;
top: -2px;
}
.menu ul {
font-size:13px;
}
.menu li {
float:left;
margin-right:3px;
padding-bottom:5px;
position:relative;
}
.menu li .active a {
background: #FFFFFF;
color: #333333;
text-shadow: 1px 1px 1px #BBBBBB;
}
.menu li a {
display:block;
line-height:16px;
padding: 7px 15px 7px 5px;
color: #FFFFFF;
text-decoration:none;
font-weight:bold;
text-shadow: 1px 1px 1px #333333;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background:url('..images/button_glas1.png') center center repeat-x #555555;
}
a {
color: #006577;
text-decoration:none;
}
You can use the superfish jQuery plugin.
Here is a demo
Either you can use javascript and hide all unwanted elements until you hover the right menu element, either you do it with CSS using something like this:
#navmenu .submenu{
display:none; /* dosen't show sub menus */
overflow:visible; /* shows overflow */
}
#navmenu li:hover > .submenu{ /* when you hover an li element change children following settings */
display:block; /* display elements */
}
HTML code example that works:
<div id="navmenu">
<ul>
<li>Réalisations
<ul class="submenu">
<li>Web</li>
<li>T-shirt</li>
<li>Autres prestations</li>
</ul>
</li>
<li> Galeries
<ul class="submenu gallery">
<li>Boston</li>
<li>Brig</li>
<li>Fleurs</li>
<li>Grèce</li>
<li>Nocturne</li>
<li>Noir&blanc</li>
<li>Paris</li>
<li>Portrait</li>
<li>Perspective</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
There are many tutorials on the web for more examples ;)