I'm having trouble with my unordered lists because the list I'm trying to create is this:
A
B
But I'm instead getting a list which is all on one line, and the bullet point for B overlaps A. Here's the relevant piece of my CSS code:
ul.c li {
list-style-type: disc;
background: #F2D7D5;
font-family: 'lato', sans-serif;
margin: 5px;
font-size: large;
}
<ul class="c">
<li>A</li>
<li>B</li>
</ul>
Here's a screenshot of what I'm seeing
EDIT:
Here's all the other code I have that relates to lists. I used this for the navigation bar at the top of the page:
li {
float: left;
}
li a {
font-family: 'Rye',cursive;
font-size: 20px;
display: block;
color: black;
text-align: center;
padding: 5px 20px;
text-decoration: none;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 8px 61.25px;
text-decoration: none;
background-color: black;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: indianred;
}
li a:hover {
background-color: indianred;
}
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);
padding: 12px 16px;
z-index: 1;
}
.dropdown-content a {
color: black;
background-color: #f1f1f1;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
Mr Lister got it; it was my
li {
float: left;
}
Related
I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).
My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.
Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.
See below current code:
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Your help will be greatly appreciated.
For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.
Your code doesn't show any CSS showing position fixed anywhere.
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed{
position:fixed;
width:100%;
top:0;
}
<div class="fixed">
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>
I am trying to display a vertical menu in a defined column on the right using a statement with a specific class "vmenu". Everything seems to work, and I get the menu items on screen but they are not stacked one on top of the other like this:
Menu 1
Menu 2
Menu 3
Menu 4
instead they are shown like they are in two columns:
Menu 1 | Menu 2
Menu 3 | Menu 4
The CSS file also has a horizontal menu defined and I'm not sure if that is interfering with the results (the horizontal & drop down menus are working just great). Any help would be greatly appreciated.
I have tried to add a [class="vmenu"] to both the [ul] and each [li] statement without any change in the results.
The CSS Code For Vertical Menus:
.vmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
.vmenu li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
}
.vmenu li:last-child {
border-bottom: none;
}
.vmenu li a.active {
background-color: #4CAF50;
color: white;
}
.vmenu li a:hover:not(.active) {
background-color: #555;
color: white;
}
The CSS Code for Horiz. Menus:
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);
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;
}
.active {
background-color: #4CAF50;
}
The HTML Code:
<div class="column2right">
<p> The Right Side</p><br>
<div class="vmenu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</div>
Your problem lies in horiz.css which is affecting all ul, li, a elements. Make it look as you did for .vmenu like this:
.hmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.hmenu li {
float: left;
}
.hmenu li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.hmenu li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.hmenu li.dropdown {
display: inline-block;
}
.hmenu .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;
}
.hmenu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.hmenu .dropdown-content a:hover {background-color: #f1f1f1;}
.hmenu .dropdown:hover .dropdown-content {
display: block;
}
.hmenu .active {
background-color: #4CAF50;
}
Hope the issue is with the float property being applied through horizontal menu.
Easy fix can be to remove the float for vmenu as
.vmenu li {
text-align: center;
border-bottom: 1px solid #555;
float:none;
}
I'm trying to create a simple dropdown menu (with only CSS) in a navbar with multiple links, the problem is that the dropdown menu will show with every link and not only with the desired one. Here is the code:
HTML & CSS
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
display: none;
position: absolute;
z-index: 1;
min-width: 160px;
}
.dropDown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.topNav .mainLink:hover .dropDown {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>
The dropdown will have to show only on the "menuIcon" link.
You already have an ID on the <a> tag you want to trigger the :hover so use that as reference selector. Also your code doesn't work because .dropDown ins't a child of your link change it to match as sibling:
#menuIcon:hover ~ .dropDown
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav:after {
content:"";
display:table;
clear:both;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
background:#e1e1e1;
display: none;
position: absolute;
top:100%;
z-index: 1;
min-width: 160px;
}
.dropDown a {
float:none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuIcon:hover ~ .dropDown, .dropDown:hover {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>
I'm beginner to css & html and creating have been having trouble with creating a dropdown menu inside navigation bar . In the drop down menu "Product" it doesnt show the dropdown menu list when clicked. If anyone can point out the issue I would be really grateful. Below is the HTML code for the navigation bar:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown:hover .dropbtn {
display: block;
}
<ul class="Navigation">
<li>HOME
</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT
</li>
</ul>
You need to change your .dropbtn to .dropdown-content like this:
.dropdown:hover .dropdown-content{
display: block;
}
Here is a snippet of the code:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
background-color: #4c4747;
}
.dropdown:hover .dropdown-content{
display: block;
}
<ul class="Navigation">
<li>HOME</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT</li>
</ul>
you can try this one:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4C4747;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown-content a:hover
{
background-color:red;
}
.dropdown:hover .dropdown-content{
display: block;
}
DEMO HERE
You need to change your .dropbtn to .dropdown-content because then the button will be displayed (with display: block;) when you hover over .dropdown even though that is being displayed anyways. You want your content to be displayed when you hover over .dropdown. So change it to this-
.dropdown:hover .dropdown-content {display: block;}
I am working on the following project:
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar nav {
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.clear {
clear: both;
}
/*Dropdown menu*/
.dropbtn {
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
margin-top: 0px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
width: inherit;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
padding-top: initial;
padding-bottom: initial; }
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
}
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<span class="dropdown">
Home
<div class="dropdown-content">
Men
Women
</div>
</span>
Blog
Promo
</nav>
<div class="clear"></div>
</div>
</div>
Everything was working fine, but when I implemented the dowpdown menu, I start having a bug when I tried to hover the dropdown list Men and Women. I think it is due to the padding-top applied to .header-two-bars .header-second-bar nav a:hover
I also don't want to remove it because the others button Blog, Promo need it.
How can I solve the problem without removing the padding-top applied at .header-two-bars .header-second-bar nav a:hover?
.dropdown-content a:hover {
background-color: #f1f1f1;
}
Removing these lines from .dropdown-content a:hover makes it work
padding-top: initial;
padding-bottom: initial;
I think you can add the below css for dropdown elements .dropdown:hover .dropdown-content a { padding: 12px 16px;}
Please see the updated fiddle, hope this will help
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar nav {
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.clear {
clear: both;
}
/*Dropdown menu*/
.dropbtn {
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
margin-top: 0px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
width: inherit;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
padding-top: initial;
padding-bottom: initial; }
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content a { padding: 12px 16px;}
.dropdown:hover .dropbtn {
}
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<span class="dropdown">
Home
<div class="dropdown-content">
Men
Women
</div>
</span>
Blog
Promo
</nav>
<div class="clear"></div>
</div>
</div>