I'm trying to build a css drop down menu.
I have a div #category_list which is hidden and I want to display it once user hover over #category_drop list element. I tried
#category_drop:hover #category_list {visibility: visible;}
But this doesn't work. Can you please suggest any solution?
My full HTML
<div id="headbar-wrap">
<p id="back-top"><span></span></p>
<div id="head-bar">
<h1>website</h1>
<ul class="main-menu">
<li><a class="st_nav_menu" href="index.php">Home</a></li>
<li id="category_drop"><a class="st_nav_menu" href="#">Categories</a></li>
<li><a class="st_nav_menu" href="top.php">Top</a></li>
<li><a class="st_nav_menu" href="anti-top.php">Anti Top</a></li>
<li class="st_add_button">Add Story</li>
</ul>
<ul class="main-2-menu">
<li><a><span style="color: red; font-weight: bold; font-size: 16px; line-height: 44px; padding: 0 10px 0 10px;">Website is under construction.</span></a></li>
</ul>
<!-- this is a hidden drop down menu -->
<div id="category_list" style="height: 400px; width: 500px; background: #000; position: absolute; z-index: 999; top: 45px; visibility: hidden;"></div>
</div>
</div>
js Fiddle of a current situation http://jsfiddle.net/nzC65/2/
Please note that :hover doesn't work for non-anchor (a tag) on older browsers.
Secondly in your code, category_list is not a child of category_drop and hence your CSS will not actually match any elements.
Check this fiddle for a working implementation: http://jsfiddle.net/YT8YR/
Related
So I'm learning to make websites in html and css. recently i encountered the error which didn't happened to me before: then i adding border to link in css, i cant get bottom and top borders to appear (that's a huge issue because i want to use border-bottom)
a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}
however if I'm adding border-bottom: to navigation li{} im getting this border
(#navigation li{} is list items surrounded by
<a href="..." class="navi">
tags)
Html code:
<nav id="navigation">
<ul>
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
</nav>
Put your <a> tags inside your <li> tags.
For example:
<li>Home</li>
Here is a working example: https://jsfiddle.net/kb3su8og/
I'm assuming you want your links underlined, which would be better if you created a div underneath the link and the colored that appropriately, but to do borders try something like this for your html:
<nav id="navigation">
<ul class="navi">
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
and have your css reflect the changes with:
navi > a:hover {
border-bottom //that stuff
What that does is when a link is hovered over it does whatever you want. I am away from my computer so I can not test the code but I think this will work if not there are tons of youtube tutorials on this exact matter. Have a nice day!
Make sure you are using <a> tag inside <li> tag, it should be
<nav id="navigation">
<ul>
<li>Stuff</li>
</ul>
</nav>
ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}
<nav id="navigation">
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</nav>
I think the more standard way to do what you want would be to put your a tags inside your li's, and use styles to make sure they fill the whole space, such as display: block.
ul {
list-style: none;
width: 200px;
}
li a.navi {
display: block;
padding: 5px;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
li a.navi:hover {
background-color: #cccccc;
}
<ul>
<li><a class="navi">One link</a></li>
<li><a class="navi">Second link</a></li>
</ul>
This may not be the style you are going for, I'm just guessing based on the snippet you provided.
I have header that is moving when I scroll my page down. I have added several buttons to it, and they are moving with it.
My problem is that my drop-button is showing its content when I am not hovering over the button itself.
My code:
/*------------------------------------dropdown menu start*/
.dropbtn {
background-color: #B9B9B9;
color: white;
font-size: 30px;
font-weight:bold;
border: none;
cursor: pointer;
position: relative;
left: 300px;
top: -18px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 300px;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 18px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ffffff}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #4d4d4d;
}
/*------------------------------------dropdown menu end*/
And a picture(black dot is a mouse location) :
What can I do to fix this?
Your problems run deep. I don't even really want to fix the entire menu because I'd basically be writing one from scratch and you can do that yourself, but what I will do is point out some issues with this to help you find your way:
The core of your design:
<div class="header-cont">
<div class="header">
<img src="">
<logotext>MyCompanyName</logotext>
<button>Home</button>
<div class="dropdown">
<button class="dropbtn">Products</button>
<div class="dropdown-content">
Product 1
Product 2
Product 3
</div>
</div>
<button>Locations</button>
<button>Contacts</button>
<button>History</button>
<div class="dropdown">
<button class="dropbtn">Language</button>
<div class="dropdown-content">
Language 1
Language 2
</div>
</div>
</div>
</div>
There are a number of things here I would never do:
<logotext> is not a valid HTML markup. You probably want a <span class="logotext"> or something along those lines.
Your navigation menu is comprised of <div>s with <button>s and other <div>s with <a> tags in them. This is a bizarre and confusing way to organize a menu. You should consider using <ul> tags and order your sub menu with <li> instead.
The problem you are directly running into is caused by the fact that you have your home <button> element with a left: 300px on it that your <div class="dropdown"> doesn't have.
A much easier and more logical way to organize a nav menu:
<ul id='menu'>
<li><a href='#'>Planets</a>
<ul>
<li><a href='#'>Mercury</a></li>
<li><a href='#'>Venus</a></li>
<li><a href='#'>Earth</a></li>
</ul>
</li>
<li><a href='#'>Stars</a>
<ul>
<li><a href='#'>Sun </a></li>
<li><a href='#'>Betelgeuse</a></li>
<li><a href='#'>Bellatrix</a></li>
</ul>
</li>
<li><a href='#'>Galaxies</a>
<ul>
<li><a href='#'>Milky Way </a></li>
<li><a href='#'>Andromeda</a></li>
<li><a href='#'>Antennae</a></li>
</ul>
</li>
</ul>
I just got this from google and here's the JSFiddle for it.
Here is a CodePen Example
Your HTML should have a mark similar to this as per your CSS
<div class="navbar">
<div class="navItem">Home</div>
<div class="navItem product-dropdown">
<span>Products</span>
<div class="dropdown-content">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
Then as for styling something similar to this:
.dropdown-content{
display:none;
}
.product-dropdown:hover .dropdown-content {
display: block;
}
.navItem {
float: left;
padding: 10px;
}
li {
list-style-type: none;
}
I may seem really silly or outright wrong in the way I code. However, when I create a drop down menu in CSS the new li elements get pushed to the other side of the page and not in the container box. How would I fix this?
Here is the code:
<nav>
<div class="wrapper">
<div class="brand">
<img class="UKLogo" src="images/logo.png" alt="">
</div> <!-- brand -->
<div class="navigation">
<ul class="nav-ul">
<li> HOME </li>
<li> ABOUT </li>
<a href="#">
<li class="course-li">
COURSES
<ul class="drop-down">
<li class="list-item"> Driver CPC </li>
<li> First Aid </li>
<li> Other </li>
</ul>
</li>
<li> CONTACT </li>
<!-- <li> TESTOMONIALS </li> -->
<!-- <li> FAQs </li> -->
</ul>
</div> <!-- Navigation -->
</div> <!-- Wrapper -->
</nav>
nav {
margin: 0px;
padding: 0px;
height: 75px;
background-color: #FFF;
}
.brand {
margin: auto;
width: 960px;
}
.company-name {
padding: 0px;
margin: 0px;
}
.UKLogo {
padding: 0px;
margin: 0px;
position: relative;
top: 11px;
}
.navigation ul li {
display: inline-block;
margin: 10px;
position: relative;
left: 380px;
top: -46px;
}
.navigation ul a {
color: black;
margin-left: 40px;
text-decoration: none;
font-family: Lato;
font-weight: 300;
}
.navigation ul a:hover {
color: #169ec5;
font-weight: 300;
}
.course-li:hover .drop-down {
left: 0px;
}
.drop-down {
position: absolute;
left: -5px;
z-index: 1;
background-color: white;
left: -9999px;
}
Thank you ever so much for looking and helping. Always open to criticism whether its the way I code or anything else.
Here is a JSFiddle https://jsfiddle.net/vj41qLts/
Many Thanks!
You need to declare a position in the parent, for the child to reside in. An element with position: absolute; will position itself to the first parent with position: relative;. If there is no parent with position: relative;, it will use the browser window instead.
See fix example here: https://jsfiddle.net/vj41qLts/1/
I think there are two thing you need to change:
ul li will select everything li in the navigation even the dropdown, ul>li will only select the immediate child, instead of running down the nested elements.
you need to add position:relative; in your dropdown's parent.
One of the first issues I see is the fact that your markup for your main links isn't setup correctly. Following a structure more link the below should give make it work the way you want it to:
<nav>
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li>
<a href="#">Courses<a>
<div>
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</div>
</li>
</ul>
</nav>
Then use CSS or JS to control showing and hiding the dropdown of links.
I am currently making a horizontal drop-down menu, I have it working so that when you hover over an image, subsequent images appear below it, then when you move away from the main link; they disappear.
But the problem is, is I want it so that when you hover over one of the subsequent links, the links remain until you move away from them, at the moment they are disappearing when you move over the link.
HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><img id="sweets-button" src="images/Sweets_Button.png"></li>
<ul style="list-style:none" class="hidden">
<li ><img src="images/Sweets_Button-Dropdown.png"></li>
<li><img src="images/Sweets_Button-Dropdown.png"></li>
</ul>
</nav>
CSS:
#navigation ul.fixtures:hover{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
color: #000;
margin-top:1px;
-webkit-transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
background: rgba(255,102,51,0.8);
opacity: 50%;
}
ul.hidden{
display: none;
position:absolute;
margin-top:-90px;
margin-left:110px;
}
li.fixtures:hover + ul.hidden{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
display: block;
position:absolute;
margin-top:-20px;
margin-left:72px;
}
Thanks for any help!
Here is some jsfiddle, which may help you visualize it:
http://jsfiddle.net/QkY83/
Básically, You have to add the whole submenu (the ul element) inside of the parent menu item (li.fixtures). Here is a minimal example (updated in the jsfiddle you provided http://jsfiddle.net/QkY83/3/):
The HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><a> This is main link </a>
<ul style="list-style:none" class="hidden">
<li><a> This is first sub-link </a></li>
<li><a> This is Second sub-link </a></li>
</ul>
</li>
</ul>
</nav>
The CSS:
ul.hidden {
display: none;
position:absolute;
}
li.fixtures:hover ul.hidden {
/* Applied to the child ul */
display: block;
margin-top:-20px;
margin-left:72px;
}
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex