I want a Dropdown navbar. But the style sheet not work for the drop down element. The elements should be vertical and not horizontal for the sub menue.
Here you can see the code. It is from w3schools. The only change is that add a class name to ensure that this rules are only fot this navbar.
But the submenue ignore now my style sheet like block and color.
Any idea?
https://www.w3schools.com/code/tryit.asp?filename=G42IHSMIFQAA
Just deleted the display: inline-block; over the ul.topnav li a, .dropbtn, as you'd force the elements to be side-by-side, and rather, use display: block; so they can obey the float: left; parameter that you want.
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a, .dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
ul.topnav li.dropdown {
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);
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: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Related
I'm working on this responsive menu using the code from here:
http://www.sanwebcorner.com/2017/03/multi-level-responsive-dropdown-menu.html
I am attempting to modify the code so that it satisfies all the following conditions:
It does not display a background color on any of the top buttons.
It always has black text in the sub menus.
All sub menus behave exactly the same in the responsive design.
But, I am running into several problems. One of which: two items in the main menu appear twice in the responsive submenu and I don't know why.
I have tried multiple solutions including:
Using additional CSS class selectors.
Every variation of colors in the existing CSS that I can think of.
Every variation of additional CSS class selectors I can think of.
I am very much looking forward to seeing this project fully completed and off my plate. If you could please take a look and identify where I'm going wrong on this code, I would be forever grateful. Thank you so very much.
body {
background-color: #908888;
}
.toggle, [id^=drop] {
display: none;
}
menu {
margin: 0;
padding: 0;
background-color: #5E4C4C;
}
menu:after {
content: "";
display: table;
clear: both;
}
menu ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
menu ul li {
margin: 0px;
display: inline-block;
float: left;
}
menu a {
display: block;
padding: 14px 20px;
color: #fff;
font-size: 17px;
text-decoration: none;
}
menu a.new {
display: block;
padding: 14px 20px;
color: #000;
font-size: 17px;
text-decoration: none;
background-color: #ffffff;
}
menu a.new2 {
display: block;
padding: 14px 20px;
color: #ffffff;
font-size: 17px;
text-decoration: none;
background-color: #5E4C4C;
}
menu ul li ul li:hover {
background-color: #f6f4fd;
color: #000000;
}
menu a:hover {
background-color: none;
color: #fff;
}
menu a.new:hover {
background-color: #f6f4fd;
color: #000000;
}
menu a.new2:hover {
background-color: #5E4C4C;
color: #ffffff;
}
menu ul ul {
display: none;
position: absolute;
top: 48px;
}
menu ul li:hover > ul {
color: #000000;
display: inherit;
}
menu ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
border-bottom: 0px;
background-color: #ffffff;
color: #000000;
}
menu ul ul ul li {
position: relative;
top: -60px;
left: 170px;
background-color: #ffffff;
color: #000000;
}
li > a:after {
content: ' ▼';
font-size: 11px;
}
li > a:only-child:after {
content: '';
}
#media all and (max-width : 768px) {
menu {
margin: 0;
}
.toggle + a, .menu {
display: none;
}
.toggle {
display: block;
background-color: #5E4C4C;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #DC4E5B;
}
[id^=drop]:checked + ul {
display: block;
}
menu ul li {
display: block;
width: 100%;
}
menu ul ul .toggle, menu ul ul a {
padding: 0 40px;
}
menu ul ul ul a {
padding: 0 80px;
}
menu a:hover, menu ul ul ul a {
background-color: #f6f4fd;
}
menu a.new:hover {
background-color: #f6f4fd;
color: #000000;
}
menu a.new2:hover {
background-color: #5E4C4C;
color: #ffffff;
}
menu ul li ul li .toggle, menu ul ul a, menu ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 17px;
}
menu ul li ul li .toggle, menu ul ul a {
background-color: #BF3441;
}
menu ul ul {
float: none;
position: static;
color: #ffffff;
}
menu ul ul li:hover > ul, menu ul li:hover > ul {
display: none;
}
menu ul ul li {
display: block;
width: 100%;
}
menu ul ul ul li {
position: static;
}
}
#media all and (max-width : 330px) {
menu ul li {
display: block;
width: 94%;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Multilevel Responsive Menu using css</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<menu>
<label for="drop" class="toggle" style="background-color: #BC7A1E;">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a class="new2" href="#">My Bid</a></li>
<li>
<label for="drop-1" class="toggle">Dashboard ▼</label>
<a class="new2" href="#">Dashboard</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a class="new" href="#">Dashboard1</a></li>
<li><a class="new" href="#">Dashboard2</a></li>
<li><a class="new" href="#">Dashboard3</a></li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">Identity ▼</label>
<a class="new2" href="#">Identity</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a class="new" href="#">Identity1</a></li>
<li><a class="new" href="#">Identity2</a></li>
<li>
<label for="drop-3" class="toggle">Identity3 ▼</label>
<a class="new" href="#">Identity3</a>
<input type="checkbox" id="drop-3"/>
<ul>
<li><a class="new" href="#">Identity3.1</a></li>
<li><a class="new" href="#">Identity3.2</a></li>
<li><a class="new" href="#">Identity3.3</a></li>
</ul>
</li>
</ul>
</li>
<li>Change Password</li>
<li>Invalid Bid Report</li>
<li>Rft Upload</li>
<li>Logout</li>
</ul>
</menu>
</body>
</html>
The twice menu problem is because you have media query it changing the display property of this <label for="drop-1" class="toggle">Dashboard ▼</label> tag .
Just remove menu a.new2 { display : block; }. Its on line 58, i think. Remove only the display: block declaration, not the entire rule.
That should solve that duplicate link issue.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
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: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
removing overflow:hidden; from ul in css style.
The Menu disappears.
I found the example on w3schools website, when i remove overflow:hidden from style in ul, the Menu is hidden.
Your menu didn't disappear, it is still there! You can inspect it like #Fran suggested or simply roll-over your mouse over it's area and you will see it getting highlighted. The behavior you are experiencing is because overflow: hidden; causes a new formatting to your block, that means that without it each element will follow it's own formatting and displays with the normal flow. Checkout this link for more details on block formatting context.
ul is a block level element. When the li are floated they take up no space and therefore the height of the ul is reduced to 0.
Now declaring overflow (anything but visible) on the ul creates a new block formatting context, which makes the ul contain its children and not be 0px height anymore.
I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places.
Since the drop-down menus are different heights I was trying to use max-height to make it work.
I thank you in advance for your time.
<div id="navbar">
<ul>
<li>HOME</li>
<li class="dropdown">LEAGUE INFO
<div class="dropdown-menu">
About Us
Contact Us
Location
B.O.D.
Field Locations
Boundary Map
History
</div>
</li>
<li class="dropdown">SEASON INFO
<div class="dropdown-menu">
Standings
Game Schedules
Home Run Club
</div>
</li>
<li>PHOTOS</li>
<li class="dropdown">MISC.
<div class="dropdown-menu">
Documents
FAQ's
Equipment
How To...
Local Rules
Archives
</div>
</li>
<li>SOCIAL MEDIA</li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I have a navigation bar with a logo inside and I was able to do it, but I was not able to align properly the text and the figure.
I would like to align the text in the center, considering the height of the logo.
Please any ideas? I tried to change many things, but did not work. In my code here, I only put a other logo as an example, my original logo is very big.
Also I do not want a background color in my logo, only in the text.
<html lang="en">
<head>
<title>data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul>
<li><img src="http://news.olemiss.edu/wp-content/uploads/2016/08/MoW-Logo.jpg" width="140"></li>
<li><a class="active" href="index.htm">Home</a></li>
<li>Info</li>
<li>Photos</li>
<li style="float:right">Help</li>
<li class="dropdown" style="float:right">
About
<div class="dropdown-content">
Team
Events
</div> </li>
</ul>
<h1> Text....</h1>
</body>
</html>
My CSS code is:
#nav a:hover {
color: black;
background-color: #FFF;
}
ul {list-style-type: none;
font-family:calibri;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 2px solid #e7e7e7;
height: 90px;
}
body {font-family:Times New Roman;line-height: 1.5em;}
li {float: left;}
li a {display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
a:hover:not(.active) {background-color: #5E9F49;}
.active {background-color:#9DC690;}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #5E9F49;
}
li.dropdown {
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;
text-align: left;
}
.dropdown-content a:hover {background-color:#9DC690;}
.dropdown:hover .dropdown-content {display: block;}
Thanks a lot
The easiest way here is set ul li and ul li a line-height for 90px (as your ul height) and set padding-top and bottom to 0.
li { float: left; line-height: 90px; }
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}
But now your drop down list is broken. We fix it by setting line-height and height for .dropdown-content links like that:
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
line-height: normal;
height: auto;
}
Now it looks fine, but your image is not aligned correctly. First of all, we need to set display: inline-block for our list elements.
li { float: left; line-height: 90px; display: inline-block; }
And then add vertical-align: middle for image
li img { vertical-align: middle; }
The last thing you want to know is unwanted hover on the first element. Remember that you can use nth-child, first-child, first-of-type combined with not selector to count elements. Add line:
li:first-child a:hover { background: none; }
And now everything should work just like you want it to. Anyway, few tips for future.
Don't be afraid of using divs. It helps, helps a lot when you need to style and control elements on website. It's nothing more than just a container.
Keep your CSS clean. It's Cascading Style Sheets. You've got in your CSS li a styles and after this li a, .dropbtn styles that override the previous one.
Don't give up and learn on. ;)
Please check this fiddle link for your answer.
I am using margin to align the navbar items in the center.
I have a navigation bar with one element containing drop-down contents. The navigation bar code comes from the w3schools site. (http://www.w3schools.com/css/css_navbar.asp)
Below the menu I have added a SVG using plotly and it hides the drop-down contents.
Is there a way to make the navigation bar on the top (drop-down contents included) ?
(I have verified that by deleting the SVG, the drop-down contents isvisible)
Here is the sample code :
HTML
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div id="myDiv" class="plotly" ></div>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
https://jsfiddle.net/5qktcvwb/
I just added z-index property for the dropdown content and it's visible now.
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}
https://jsfiddle.net/5qktcvwb/4/