I'm attempting to create a simple drop down menu for. What I have currently looks like the following: http://jsfiddle.net/Wt9UC/
Now, what I'm aiming to achieve is something more in the lines of what Fiverr has, see for reference.
To clarify, I'm attempting to get borders (top, left, right) around the menu item hovered and around the entire box of sub-items which appears on-hover. If I'm being unclear in my wording the following image might help.
I tried playing around with layers (e.g. bringing the sub-items to the front in hopes of the border line being covered) but it didn't work out very well.
My HTML:
<ul id="menu">
<li>Test
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
My CSS:
#menu a {
color: black;
}
#menu {
padding: 0;
margin: 0;
list-style-type: none;
height: 30px;
}
#menu li {
float: left;
}
#menu li a {
padding: 9px 20px;
display: block;
text-decoration: none;
font-size: 12px;
}
#menu a:hover {
color: #c5cbc9;
border-radius: 3px;
border-left: 1px solid;
border-top: 1px solid;
border-right: 1px solid;
}
/* Submenu */
#menu ul {
border-radius: 3px;
border: 1px solid;
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
}
#menu li:hover { /*had bg*/
position: relative;
}
#menu li:hover ul { /*had bg*/
left: 0px;
top: 30px;
padding: 0px;
}
#menu li:hover ul li a {
padding: 5px;
display: block;
width: 168px;
text-indent: 15px; /*had bg*/
}
#menu li:hover ul li a:hover {
text-decoration: underline;
}
Thanks for your time!
Here is a Complete tutorial for building a Mega Menu. Hope this helps.
http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129
Demo Link : http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html
Hover on "4 column"/ Thats your exact requirment/
u need to do the following:
Add a "border-bottom: 1px solid #FFF" to your "#menu li a {}" and then move your dropdown 1px up.
link to fiddle http://jsfiddle.net/cL2x7/
Related
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
In menu I apply last-child declaration to { border: none;}. After that my SUBmenu doesn't show borders even with declaration: {border-bottom: 1px solid black;} Any ideas why my second declaration doesn't work? FIDDLE
P.S I figured out that when I change ul.topmenu.... to ul.... everthing works perfect. But I still need to have ability to use my class name.
/************QUESTION ZONE**************/
ul li a {
border-bottom: 1px solid black;
}
ul.topmenu li:last-child a {
border: none;
}
ul.secondsubmenu li a {
border-bottom: 1px solid black;
}
/**********end question********/
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
height: 2em;
background: yellow;
}
li {
float: left;
}
li a {
display: block;
line-height: 2em;
width: 6em;
text-align: center;
}
ul.submenu, ul.secondsubmenu {
height: auto;
}
ul.submenu li {
float: none;
}
ul.secondsubmenu {
background: yellow;
color: white;
height: auto;
position: absolute;
left: 12.6em;
top: 6.9em;
margin-left: 1px;
}
<nav>
<ul class="topmenu">
<li>!
<li>!!
<ul class="submenu">
<li>111
<li>222
<li>333
<ul class="secondsubmenu">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</li>
</ul>
</li>
<li>222
</ul>
</nav>
change this
ul.topmenu li:last-child a {
border: none;
}
to this
ul.topmenu > li:last-child a {
border: none;
}
when you add this symbol > it means only first children's
example
Because the ul.topmenu li:last-child a is more specific, and all the a tags in the submenu (which belongs to the last li) are matched by this rule
change your second rule to
ul.topmenu .secondsubmenu li a {
border-bottom: 1px solid black;
}
Put the two rules in http://specificity.keegan.st/ to understand their specificity.
I've coded a css dropdown menu and cant seem to get the name "LOGOS" to stay within the green box when I hover over the word "Illustration". I've made the word 5em so I can see it. Cant get it to stay in the box...no control of it's position. Can you help?
Thanks,
T.
<div id="nav-bar-sm-cont">
<ul id="sm-nav">
<li id="home">HOME</li>
<li id="about">PROFILE</li>
<li id="illustration">ILLUSTRATION
<ul>
<li id="logos">LOGOS</li>
</ul>
</li>
<li id="billboards">BILLBOARDS</li>
<li id="six-mo">6 MO BREAKFAST</li>
<li id="cal">ARTSHOW</li>
<li id="church">CHURCH</li>
<li id="contact">CONTACT</li>
<li id="cat-ill">CAT ILLUSTRATION</li>
<li id="contact-cat">CONTACT CAT</li>
</ul>
</div>
<!--end nav bar sm container -->
/* START small NAV bar **************************/
#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;
}
#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%;
letter-spacing: 0.3em;
list-style-type: none;
float: left;
}
#sm-nav a:link{ text-decoration:none;
color:silver;
background-color:transparent;
padding: 5px 5px;
}
#sm-nav a:visited {text-decoration:none;
color: #9781B7;
padding: 5px 5px;
background-color: transparent;
}
#sm-nav a:hover {text-decoration:none;
color: #fff;
background-color:#a7d6d5;
padding: 5px 5px;
}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;
}
/*start drop down************************************/
#sm-nav li ul { position:relative;
list-style-type: none;
display: none;
}
#sm-nav li:hover ul { position: absolute;
background: green;
padding: 5px 5px;
display:block;
font-size: 5em;
width: 103px;
height: 10px;
}
/*end drop down*****************************************/
/* END small NAV BAR *****************************/
The problem is that your CSS for the li is affecting both the parent li and the child. To fix that just change:
#sm-nav li {
to
#sm-nav > li {
Now that CSS will only affect the parent li and you're free to adjust the CSS for the child however you want like this:
#sm-nav li:hover ul li { }
JSFiddle
I have been reading and searching the whole day long. I even read this article and tried to work it out but with no success.
So, what I want to do is a CSS menu with sub menus and have the sub menus centered to the page. This is what I have done so far. What I want is that the submenus show up completely centered to the page. Is this possible?
Here's the HTML:
<div id="menu_panel">
<div id="menu_2border">
<div id="menu_section">
<div id='menu1'>
<ul>
<li class='first sub'><a href='#'><span>Hem</span></a>
<ul>
<li><a href='#'><span>Privat</span></a></li>
<li><a href='#'><span>Om Robust</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Koncept</span></a>
<ul>
<li><a href='#'><span>Insikt</span></a></li>
<li><a href='#'><span>Koncept</span></a></li>
<li><a href='#'><span>Aktivering</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Uppdrag</span></a>
<ul>
<li><a href='#'><span>Företag</span></a></li>
<li><a href='#'><span>Privat</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Blogg</span></a>
<ul>
<li><a href='#'><span>Arkiv</span></a></li>
<li><a href='#'><span>Kategori</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Om Robust</span></a>
<ul>
<li><a href='#'><span>Vad erbjuder vi?</span></a></li>
<li><a href='#'><span>Vilka är vi?</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Kontakter</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
And the CSS:
#menu_panel {
width:100%;
height: 49px;
color:#4b4b4b;
display:block;
border-top:#efefef 1px solid;
}
#menu_2border {
width:100%;
border-top:#7a7a7a 1px solid;
}
#menu_section {
width: 960px;
height: 29px;
margin:auto;
padding: 0 0 0 30px;
color:#4b4b4b;
background-color:#fff;
}
#menu1 ul,
#menu1 li,
#menu1 span,
#menu1 a {
margin: auto;
padding: 0;
position: relative;
}
#menu1 {
height: 29px;
background: #fff;
margin:auto;
}
#menu1:after,
#menu1 ul:after {
content: '';
display: block;
clear: both;
}
#menu1 a {
background: #fff;
color: #4b4b4b;
display: inline-block;
font-size: 15px;
line-height: 29px;
padding: 0px 40px;
text-decoration: none;
}
#menu1 ul {
list-style: none;
/* float: left; */
}
#menu1 > ul > li {
float: left;
}
#menu1 li .mainmenu {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover:after { /* faz as setas debaixo dos items do menu */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 7px solid #fff;
margin-left: -10px;
}
#menu1 > ul > li.sub {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li.first {
border-left:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover > a {
background: #efefef;
}
#menu1 .sub {
z-index: 1;
}
#menu1 .sub:hover > ul {
display: block;
background-color:#
}
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin:auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
#menu1 .sub ul li {
*margin-bottom: -1px;
}
#menu1 .sub ul li a {
background: #fff;
filter: none;
font-size: 13px;
display: block;
line-height: 120%;
padding: 10px 30px;
}
Notice that there are pointing arrows in each item of the menu, and they should stay where they are. What should be centered are the big submenu rectangles.
Many thanks in advance!
I dont explicitly understand your situation, do you need something like this? If so, i will make clear understanding on it.
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin-left: -401.5px; /* width divided by 2 */
left: 50%;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
Example / Screen Result
You need to apply absolute positioning to your drop down menu, and have it relate to your top-level menu by applying relative positioning only to it. That direct relationship means you can set your drop-down menu to left: 0 and right: 0, sticking it to the left-most side and right-most side respectively of the top-level menu regardless of where it appears in your HTML (ie. it will match the width of your top-level ul).
Because you have set position:relative to a number of items, and some of your code might be dependant on that, I can't easily change your code to make it work. However, I put together this quick demonstration on jsfiddle to illustrate my explanation. I hope it helps.
I have the following markup for a CSS dropdown menu:
<ul>
<li><a>FieldOne LevelOne</a></li>
<li><a>FieldTwo LevelOne</a></li>
<li><a>FieldThree LevelOne</a>
<ul>
<li><a>FieldOne LevelTwo</a>
<ul>
<li><a>FieldOne LevelThree</a></li>
<li><a>FieldTwo LevelThree</a></li>
</ul>
</li>
<li><a>FieldTwo LevelTwo</a>
<ul>
<li><a>FieldOne LevelOn</a></li>
</ul>
</li>
</ul>
</ul>
And the following CSS:
ul ul {
display: none;
}
ul li {
list-style: none;
}
ul li:hover > ul {
display: block;
}
ul
{
background: #76b800;
padding: 0 20px;
margin-left: 5px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
min-width: 140px;
text-align: center;
vertical-align: bottom;
}
ul li:hover {
background-color: #4478B7;
}
ul li a
{
display: block;
padding: 10px 40px 10px 40px;
color: #fff;
text-decoration: none;
font-size: 18px;
}
ul ul {
background: #4478B7;
padding: 0;
position: absolute;
top: 100%;
z-index: 5;
margin: 0;
}
ul ul li
{
float: none;
border-top: 1px solid;
border-bottom: 1px solid;
position: relative;
border-style: solid;
border-width: 1px;
border-color: #88AAD2 white #335B8C white;
}
ul ul li:hover
{
background-color: #396599;
background-image: none;
}
ul ul li a {
color: #fff;
min-width: 140px !important;
padding: 10px 40px 10px 40px !important;
font-size: 16px !important;
}
ul ul li a:hover {
background: #233F61;
}
ul ul ul {
position: absolute;
left: 100%;
top:0;
}
The problem: When you go to the second level and you hover over a LI, the third level list appears. If you go from one LI to another in the second level, the third level list nested inside the first LI disappears and the one nested inside the second appears (if it has one).
BUT
If instead you leave the second-level list altogether without making the third-level menu disappear by navigating inside the second-level menu, once you re-list the second-level menu the third-level one that was last showed appears there next to its LI, but without content (no text from As). The lists appear with the style as though as they weren't being hovered.
You can check the effect here: http://jsfiddle.net/JE8ZM/. If you run it on IE9 or Chrome, it works. But if you run it on IE7, try going to FieldOne LevelTwo, hover over it and then leave on its left, without entering the third-level menu that showed up. Then hover over FieldThree LevelOne and see what I mean.
Thanks.
Nested sub nav menus are notoriously difficult to get working cross browser without the aid of Javascript or jQuery. Here is the best 'pure CSS' resource I know of which will solve your problem!
http://www.cssplay.co.uk/menus/final_drop2.html