I cannot get the drop down aspect of this menu to show- I'm sure this is an easy fix- I just do not see it. The menu itself is nothing fancy, no sub-menu- just simple drop options are needed. I have checked out several tutorials and they are all different, so if I can get help in adjusting the work I have already done this would be the best scenario. Thanks for any help in advance!
#headernav {
float: right;
width: 555px;
padding: 0px;
text-align:center;
margin:0;
list-style-type:none;
}
#headernav li {
float:left;
}
#headernav li a {
display: block;
text-decoration: none;
width:6em;
height:35px;
text-decoration:none;
color:#161616;
background:url(../images/linkbg2.png);
background-repeat:no-repeat;
padding:0.2em 0.6em;
padding-top:20px;
margin-left:3px;
font-size:14px;
letter-spacing:1px;
font-weight:500;
}
#headernav li a:hover {
text-decoration: none;
height:35px;
color: #161616;
position: relative;
width: 6em;
text-align: center;
padding:0.2em 0.6em;
display: inline;
float:left;
padding-top:20px;
margin-left:3px;
cursor:pointer;
}
#headernav li ul {
display:none;
}
#headernav li hover:ul {
display:block;
position:absolute;
width:150px;
background:#03C;
list-style:none;
}
#headernav ul li {
float: none;
}
#headernav ul li a {
display: block;
border-top: 1px solid #666;
}
HTML:
<ul id="headernav">
<li>Donate</li>
<li>Answers</li>
<li><a style="width:8.5em;" href="news.html">News & Events</a></li>
<li>About Us
<ul>
<li>Mission</li>
</ul>
</li>
<li>Contact</li>
</ul>
I think you meant to write
#headernav li:hover ul {
instead of #headernav li hover:ul {
Also you should probably add something like top: 60px; to this class.
A pretty simple way to add an arrow would be:
#headernav li {
float:left;
position:relative; <-- add this
}
then add this class to your css
#headernav li a.hasdropdown:after {
content: " ";
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 6px 0 6px;
border-color: #000000 transparent transparent transparent;
position:absolute;
left: 90px;
top: 24px;
}
Add the "hasdropdown" class to every Anchor-Tag that should display an arrow:
<li>About Us
Hope this helps a bit.
Related
I'm putting up a site on Tumblr for my online store. Thing is, I can't get the dropdown menu to show up when I put "overflow:hidden" on the #topmenu part. When I set it to "overflow:visible", I get a huge chunk of white space to the right of the webpage. The white space isn't obvious when I'm using my laptop but it is when I use my phone.
I've tried changing the value of the z-index but it still won't work. I want to be able to have "overflow:visible" while not getting the white space at the right side of the page.
Please help me figure out what's wrong with the code and find a solution. I think there's something wrong with the width of the menu. But then when I change the width, all the links are pushed to the left side of the page.
Thank you in advance!
#topmenu {
font-family: 'Montserrat', sans-serif;
float:left;
width:100%;
background:transparent;
overflow:visible;
z-index:99999;
position:relative;
}
#topmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#topmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:3pt;
position:relative;
right:50%;
}
#topmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:4px 11px;
background: transparent;
color: #222222;
font-size:10px;
text-decoration:none;
line-height:2em;
letter-spacing: 3px;
}
#topmenu ul li a:hover {
background: none;
color: #b492a8;
}
#topmenu ul li ul.dropdown{
min-width: 125px;
max-width: 125px;
background: #ffffff;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#topmenu ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
padding:0px 0px 0px 50px;
}
#topmenu ul li ul.dropdown li{
display: block;
}
<div id="topmenu">
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>FAQ</li>
<li>ORDER FORM</li>
<li>CUSTOMERS
<ul class="dropdown">
<li>OOTD</li>
<li>Feedbacks</li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
EDIT:
I tried using #gopalraju's code and it eliminated the white space while showing the dropdown menu. (Thank you gopalraju!)
How do I push the whole menu to the center of the page?
And how do I put the dropdown menu right under the word "Customers"?
#topmenu {
font-family: 'Montserrat', sans-serif;
float:left;
width:100%;
background:transparent;
overflow:visible;
z-index:99999;
position:relative;
}
#topmenu ul {
clear:left;
list-style:none;
margin:0;
padding:0;
position:relative;
display:table;
margin:0 auto;
text-align:center;
}
#topmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:3pt;
position:relative;
}
#topmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:4px 11px;
background: transparent;
color: #222222;
font-size:10px;
text-decoration:none;
line-height:2em;
letter-spacing: 3px;
}
#topmenu ul li a:hover {
background: none;
color: #b492a8;
}
#topmenu ul li ul.dropdown{
min-width: 125px;
max-width: 125px;
background: #ffffff;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#topmenu ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
#topmenu ul li ul.dropdown li{
display: block;
}
<div id="topmenu">
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>FAQ</li>
<li>ORDER FORM</li>
<li>CUSTOMERS
<ul class="dropdown">
<li>OOTD</li>
<li>Feedbacks</li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
hoping someone could help me solve this issue...im not using js, just css and html. I have built a menu which works good but my issue is when i try to add in a sub menu. I would like for it be hidden until someone goes over the main menu, then i would like for it to drop down. The effect that im getting now is my sub menu loads right away with the main menu above it and then it disappears when i go over that main menu item. i have tried some different things such as adding z-index here and there, but no luck so far...
HTML:
<div id="container">
<div id="menu">
<ul id="nav">
<ul>
<li id="menu1"><h2>Home</h2></li>
<li id="menu2"><h2>Sign-Up</h2></li>
<li id="menu3"><h2>Packages</h2>
<ul>
<li>Gold</li>
<li>Platinum</li>
</ul>
</li>
<li id="menu4"><h2>About Us</h2></li>
<li id="menu5"><h2>Contact</h2></li>
</ul>
</ul>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.form-textbox{
height:100px;
font-size:100px;
}
#fieldset{
width:300px;
}
#fieldst p{
clear:both;
padding:5px;
}
#legend{
font-size:16px;
}
label[for="username"] {
color:#FFFFFF;
font-weight:bold;
clear:both;
text-align:left;
}
label[for="password"] {
color:#FFFFFF;
font-weight:bold;
clear: both;
text-align:left;
margin-top:40px;
}
body {
padding-top:0px;
background-color:#01111d;
color:#FFF;
font-family:verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {
color: #FFF;
font-size: 14px;
}
a:hover {
color:#efae00;
} //01a9c0
.more {
float:left;
}
.clear {
clear:both;
}
p {
margin: 20px 0px 20px 0px;
line-height: 16px;
font-size: 14px;
}
#container {
margin: 0px auto;
width: 873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
z-index:99999;
}
#menu li{
position:absolute;
top:40px;
list-style-type:none;
}
#menu1 {
left:110px;
}
#menu2 {
left:255px;
}
#menu3 {
left:400px;
}
#menu4 {
left:540px;
}
#menu5 {
left:680px;
}
#menu a {
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover {
color:#efae00;
}
#menu li > #nav li ul
#nav li ul {
position:absolute;
display:none;
}
#nav li:hover ul {
display: none;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 118px;
position: absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
Jsfiddle here: http://jsfiddle.net/bC7f2/
So it appears there are a few things that we can change in your code. The first thing is when you should and should not display things. To keep it short, I have made a few adjustments to the CSS code, just be sure you are getting the exact area you are trying to use. Here are the new selector names:
#nav ul li:hover ul #ITEM NAME HERE
#nav li ul # ITEM NAME HERE
Next, you started off by displaying your drop down menu as "display: block;" , this means that anything in the drop down menu will automatically begin on the page, this should actually be set to "display:none;", so that it is not visible until you hover. Here is your end product:
#nav ul li:hover ul #item1 {
display: none;
position: absolute;
z-index: 100;
display: inline-block;
top: 20px;
}
#nav ul li:hover ul #item2 {
/* display: none; */
position: relative;
z-index:1;
display: block;
top: 13px;
}
#nav ul li:hover ul #item3 {
/* display: none; */
position: relative;
z-index:0;
display: block;
top: 27px;
}
#nav li ul #item1 {
z-index:100;
display:none;
}
#nav li ul #item2 {
z-index:1;
display:none;
}
#nav li ul #item3 {
z-index:0;
display:none;
}
I also added a margin here to connect the sub menu to the normal menu or else it will act really weird. Your end product can be found here.
I would suggest looking into some specific tutorials on how to create drop down menus with CSS or look into using jQuery with your drop down menu (it will make it more clean and easy to use).
Edit: Here is an update with the sub menus showing, I have also added another sub menu to show you exactly how the items will work and the corresponding CSS to go with it here.
To break down my additions, I will split it up into sections really fast:
Z-Index: This is pretty much the order of what the items will appear in, where the higher the number, the higher on the list it will appear. Here is a resource for more information.
Positioning: I have used a combination of absolute and relative positioning. This is extremely dirty and I don't know if many would recommend the use of this in the applicable web programming world. It would be better to use solely absolute positioning, but this will still get your job done. More information can be found here.
Top: This is pretty self explanatory but it is really the distance from the utmost top object. More information on this can be found here.
Hi Please help me on this issue.
Issue: dropdown values of the menu is shown in other menu (it is not in-line with menu).
Example: Dropdown values of Home menu is Home-1, Home-2, Home-3 and it will shown under National parties menu. How can I show appropriately under the right menu
Demo: http://jsfiddle.net/shrikanth/Sv79m/
<div id="menu">
<ul>
< li>Home<ul>
<li>Home-1</li>
<li>Home-2</li>
<li>Home-3</li>
</ul></li>
<li ><a href="aboutus.html">National Parties<ul>
<li>BJP</li>
<li>Congress</li>
<li>CPM</li>
</ul></a></li>
<li><a href="services.html">Services<ul>
<li>TV</li>
<li>Cell</li>
<li>Radio</li>
</ul></a></li>
<li>Contact Us
<ul>
<li>India</li>
<li>USA</li>
<li>SAUS</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 1px 2px 1px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu ul li a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
#menu ul li ul{
display:none;
position:absolute;
top:31px;
background-color:red;
}
#menu ul li:hover ul{
display:inline-block;
height:auto;
width:135px;
}
#menu ul li ul:before{
content: '';
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 37%;
margin-left:10px;
}
http://jsfiddle.net/Sv79m/1/
Give #menu li a position of relative:
#menu li {
display: inline;
padding: 20px;
position:relative;
}
Adjust a little the absolute positioning with left:0 :
#menu ul li ul{
display:none;
position:absolute;
top:51px;
background-color:red;
left:0;
}
Edit:
Also, to solve the overlapping links, add this:
#menu ul li ul li{
display:block;
padding:5px;
}
http://jsfiddle.net/Sv79m/2/
Also, you had some unclosed tags, I closed them and now it's much better:
http://jsfiddle.net/Sv79m/3/
<a href="aboutus.html">National Parties<ul>
^^CLOSE ME!
It's all down to the positioning of the containing element. If you use position: relative; it allows you to position elements absolutely inside of it.
Here's a tutorial on creating a dropdown navigation, it explains about the positioning and structure. This should help - CSS 3 navigation menu
I've tried making horizontal drop down navigation bars following tutorials, however they are never centered and I can't figure out how to center them. I tried going in the opposite direction and centering my navigation bar first, and then attempting to make it a drop down menu, though this seems to throw everything off. This is the code I have.
EDIT: The problem I am having is that the submenu is displayed when the page is loaded, along with a bullet point, which I'm sure can be fixed by setting the list-style to none, however I'm not sure where in the CSS this should be.
I'm trying to create a menu similar to THIS. I understand this uses joomla and I am not.
#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#footer {
height: 85px;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 1 solid #ccc;
border-left: 1 solid #ccc;
border-bottom: 1 solid #ccc;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 10px 10px;
text-decoration: none;
font-weight: bold;
}
#menu li a:hover {
color: #c00;
}
<ul id="menu">
<li>Home
</li>
<li>Kandi
<ul>
<li>Claim Kandi
</li>
</li>
<li>Events
</li>
<li>Artists
</li>
<li>Community
</li>
<li>Merchandise
</li>
</ul>
Add this CSS:
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
http://jsfiddle.net/tcKvH/1/
use this css
#menu{
position:absolute;
top:150px;
left:8%;
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
line-height:30px;
}
#menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
#menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
#menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
#menu ul li:hover ul{
visibility:visible;
z-index:1;
}
#menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
#menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}
with this html code
<div id="menu">
<ul>
<li>Home</li></ul>
<ul>
<li>Video <!--This is in main menu-->
<ul>
<li>Technology</li> <!--This is in drop downmenu-->
<li>Tutorial</li> <!--This is in drop downmenu-->
</ul>
</li>
</ul>
Roll over the text and the blue block below moves along the blue line. If I do it via position relative and set the blue block to top 20px, it also moves the text down.
Is there a way I can do this purely in CSS, or should I use a background image with the top half set as a transparent gif and the bottom blue?
The code I've tried so far is:
#menu ul {
list-style:none;
margin:0;
padding:10px;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin-right: 40px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
height: 39px;
}
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background-color: #0488C5;
font-weight:bold;
}
I am still learning so excuse any mistakes!
Click here for a demo.
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
</ul>
ul {
width: 100%;
border-bottom: 3px solid blue;
overflow: hidden;
}
li {
float: left;
margin: 0 20px 0 20px;
}
li a {
border-bottom: 20px solid #fff;
display: block;
}
li a:hover, .active {
border-bottom: 20px solid blue;
}
You can then use the hover state for another class called something like "active" that you can apply when on that page.
You should be able to tweak this example to suit your needs.
You don't need any images. CSS is more than capable of doing this for you.
....................................
Live demo
Hi now this is possible used to after in css
as a simple example is this
HTML
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Css
ul{
list-style:none;
border-bottom:solid 10px blue;
}
li{
display:inline-block;
vertical-align:top;
background:red;
}
li a{
text-decoration:none;
display:inline-block;
vertical-align:top;
position:relative;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
li:hover a:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:10px;
background:blue;
}
LIve demo
Place three anchors in an unordered list and have them displayed in-line by setting the list display to none an floating the list items. Further add an empty span to each anchor which you can style with the :hover pseudo selector.
Learn CSS, its fun!