On my website I have a navigation bar that I want to change colors to a red tint when I hover over it (right now I have it set to black). However, the CSS doesn't do anything at all when I hover over the navigation bar.
HTML:
<div id="topNav">
<ul class="nav">
<li class="home">Home</li>
<li>About Us</li>
<?php
if(!Auth::LoggedIn())
{
// Show these if they haven't logged in yet
?>
<li class="home">Careers</li>
<?php
}
else
{
// Show these items only if they are logged in
?>
<li>Pilot Center</li>
<?php
}
?>
<li class="home">Operations</li>
<li class="home">Forums</li>
<li class="home">Contact Us</li>
<li>Live Map</li>
<?php echo $MODULE_NAV_INC;?>
<?php
if(Auth::LoggedIn())
{
if(PilotGroups::group_has_perm(Auth::$usergroups, ACCESS_ADMIN))
{
echo '<li>Admin Center</li>';
}
?>
<li>Log Out</li>
<?php
}
</ul>
</div>
CSS:
#topNav { font-size: 14px; padding-top: 10px; width: 970px; margin: auto; height: 50px; background-color: #000; }
#topNav ul { margin: 0; padding: 0; list-style: none; margin: 0 auto; }
#topNav ul:hover { margin: 0; padding: 0; list-style: none; margin: 0 auto; }
#topNav ul li { height: 37px; float: left; padding: 0px; font: bold 12px/37px Arial, Helvetica, sans-serif; }
#topNav ul li:hover { height: 37px; float: left; padding: 0px; font: bold 12px/37px Arial, Helvetica, sans-serif; }
#topNav ul li a { padding: 0 18px; height: 37px; float: left; text-decoration: none; display: block; color: #ffffff; font: 14px/37px Arial, Helvetica, sans-serif; }
#topNav ul li a:hover { padding: 0 18px; height: 37px; float: left; text-decoration: none; display: block; color: #ffffff; font: 14px/37px Arial, Helvetica, sans-serif; }
.nav, .nav ul { list-style: none; margin: 0; padding: 0; }
.nav { font-family: Arial, Helvetica, sans-serif; z-index: 1000; position: relative; }
.nav li { float: left; margin: 0; padding: 0; position: relative; }
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { font: bold 1.22em/25px Arial, Helvetica, sans-serif; color: #959595; display: block; padding: 0 9px; text-decoration: none; }
.nav ul { list-style: none; margin: 0; width: 150px; position: absolute; top: -999em; left: -1px; }
.nav ul li { border: 0; float: none; }
.nav ul a { padding-right: 20px; width: 150px; white-space: nowrap; }
It looks like you're missing CSS to actually set it to hover. You need something like
#topNav:hover {background: red}
Related
I am very new to programming and am working on a website as a project for a class. I am attempting to create a drop down menu, but I continually run into an issue where my links in the drop down sub-menu are not taking up the full width I would like. See the pic below.
https://i.stack.imgur.com/u6koe.png
I would like the link and thus the hovered white background to extend the full width of the sub-menu but I cannot figure out how to make it work.
Here is my HTML:
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
Here is my CSS:
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
}
Any assistance is appreciated.
Add display: inline-block; and width: 100%; to your #menu li ul.submenu li a css rule.
body {
margin-top: 0px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: auto;
margin-right: auto;
background-color: aquamarine;
}
#mainheader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #818181;
text-align: center;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#menu li a {
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px 30px;
}
#menu li a:hover {
background-color: white;
color: black;
}
#menu li ul.submenu {
height: auto;
width: 133px;
background: #818181;
position: absolute;
display: none;
padding: 0;
margin-top: 10px;
}
#menu li:hover ul.submenu {
display: block;
}
#menu li ul.submenu li {
width: 133px;
}
#menu li ul.submenu li a {
text-decoration: none;
padding: 10px 0px;
display: inline-block;
width: 100%;
}
<header id="mainheader">
<nav>
<ul id="menu">
<li>About Me</li>
<li>Creativity
<ul class="submenu">
<li>Skiing</li>
<li>Island</li>
<li>Cooking</li>
</ul>
</li>
<li>Revisions</li>
</ul>
</nav>
</header>
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
I want my dropdown menu with position: absolute to move the content in div#main 136px down. It didnt work using nav ul li:hover #main {margin-top: 136px;}. I want to solve the problem via html/css if possible! Site:
body {
margin: 0;
padding: 0;
background-color: #327ead;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
color: #c4c4c4;
}
a {
text-decoration: none;
color: #c4c4c4;
}
b {
letter-spacing: 2px;
}
div#head {
width: 100%;
background-color: #3c3c3c;
height: 53px;
}
nav {
background-color: #3c3c3c;
width: 930px;
margin: 0 auto;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
position: relative;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
border-bottom: 4px solid #327ead;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a:hover {
color: #327ead;
}
nav ul ul li:hover {
border-bottom: none;
}
nav ul li a {
display: block;
padding: 10px 15px;
font-size: 25px;
}
nav ul ul {
display: none;
position: absolute;
background-color: #3c3c3c;
width: 400px;
height: 136px;
text-align: left;
}
nav ul ul li {
display: block;
font-size: 16px;
padding: 4px 0 4px 10px;
}
nav ul ul li a {
font-size: 16px;
padding: 0;
}
ul.news1 {
margin: 4px 0 0 0;
}
ul.news2 {
margin: 4px 0 0 400px;
}
ul.news3 {
margin: 4px 0 0 800px;
width: 130px;
}
div#main {
width: 930px;
margin-left: auto;
margin-right: auto;
color: #c4c4c4;
text-align: justify;
}
div#mostrecentnews {
background-color: #3c3c3c;
margin: 10px 0 10px 0;
padding: 4px 8px;
}
<div id="head">
<nav>
<ul>
<li>News
<ul class="news1">
<li><b>Today's News</b></li>
<li>content...</li>
<li>content...</li>
<li>content...</li>
<li>Browse More...</li>
</ul>
<ul class="news2">
<li><b>Top Weekly News</b></li>
<li>content...</li>
<li>content...</li>
<li>content...</li>
<li>Browse More...</li>
</ul>
<ul class="news3">
<li><b>History</b></li>
<li>May</li>
<li>April</li>
<li>March</li>
<li>Browse More...</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="main">
<img src="data/RL-Takumi.jpg">
<div id="mostrecentnews">
<b>Welcome to RocketLeague-Data.com!</b><br>
content...content...content...content...content...content...content...content...content...content...content...
</div>
</div>
REFINED:
Used JQuery:
var down = false;
$('#btn').hover(function () {
if (down == true) {
$('#main').css("margin-top", "0");
down = false;
} else {
$('#main').css("margin-top", "136px");
down = true;
}
});
FIDDLE
here is index.html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" width="130" height="45">
<nav>
<ul>
<li>Monitoring</li>
<li>Process</li>
<li>Post and Create Email/Excel</li>
<li>Reports
<ul>
<li>Re-Create Email</li>
<li>Merge and Post</li>
<li>Create Excel Report</li>
</ul>
</li>
<li>
<li>Tools
<ul>
<li>Users</li>
<li>Folder Path</li>
<li>Change Folder Path</li>
</ul>
</li>
<li>Sales</li>
</ul>
</nav>
</div>
</body>
</html>
here are the style.css code:
body{
margin: 0;
padding: 0;
font-size: 15px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
-----------
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
so i wanted to have a sub menu for may navigation bar that if the mouse pointed in the nav menu the sub menu will drop down. but my code didnt work. what seem to be the problem?
Remove overflow: hidden; from nav make it works. Because overflow hidden not allow submenu to display on hover.
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
// overflow: hidden; // remove this
}
Working Fiddle
remove overflow this class nav
body{
margin: 0;
padding: 0;
font-size: 15px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li > ul{
background-color: #bbb;
display: none;
margin-top: 1px;
}
nav li:hover ul{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
-----------
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
https://jsfiddle.net/28ze1wxv/1/
Same answer, just remove the overflow hidden from
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
after that your code is working,
Hello Mates,
I'm trying to build a CSS menu that is displayed above. So far I wrote this HTML:
<div class="left-menu">
<ul class="menu-left">
<li id="current" class="parent active item5">
<span>ღვინო</span>
<ul>
<li class="parent item6">
<span>TELIANI VALLEY</span>
<ul>
<li class="item7">
<span>ლეგენდა</span>
</li>
<li class="item8">
<span>ღვინოები</span>
</li>
<li class="item9">
<span>ჯილდოები</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
and this is my CSS:
/* 1 */
.left-menu ul {
width: 145px;
margin: 0;
padding: 0;
list-style: none;
}
.left-menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
.left-menu ul li {
width: 145px;
margin: 0;
padding: 0;
height: 20px;
background:#fff;
}
.left-menu ul li a {
width:131px;
height:20px;
padding-left: 14px;
float: left;
font: normal 12px calibri, sylfaen, georgia, arial, verdana;
color: #7b2029; text-decoration: none;
}
.left-menu ul li:hover, .left-menu ul li#current {
width: 145px;
height: 20px;
color:#fff;
text-decoration: none;
}
.left-menu ul li#current a {
width: 131px;
height: 20px;
padding-left: 14px;
color: #fff;
text-decoration: none;
background: #7b2029;
display:block;
}
/* 2 */
.left-menu ul li ul {
width:145px;
padding:0;
margin: 2px 0 0 0;
float: left;
list-style: none;
}
.left-menu ul li ul li {
width: 137px;
margin: 0;
padding: 0;
height: 20px;
list-style: none;
padding-left: 8px;
}
.left-menu ul li ul li a {
width: 120px;
height: 20px;
padding-top: 0px;
font: normal 12px/20px calibri, sylfaen, georgia, arial, verdana;
background:#887b33;
}
/* 3 */
and I'm getting displayed this crap:
Can someone tell me why? I haven't experience such thing before...
Link to example fiddle I have created:
Fiddle...
I didn't bother with hover effects, and colors/font styles. You can always change it...
Tested on mozilla and IE (ain't got chrome at work).
I hope it helps.
Daniel