I've added a logo to the left side of my horizontal navigational bar and I'm having a few different problems. And first of all here is a screenshot: http://i.imgur.com/TUafzKs.png
Problems:
-I want to line up all of the text with the BOTTOM of the logo. Right now all of the text is automatically lining up with to the top.
-On hover of the links, I want the background color change to white to extend to the full height of the bar, but it's only doing a portion of it. Here is a screenshot: http://i.imgur.com/ljkEdol.png
-As you can see in the first screenshot, the bar does not extend to the ends of the page (sides and top). There is a small amount of space in between. I want there to be no white space; just the pink extending to the edges.
HTML for the bar:
<ul id="nav">
<li><img id="logo" src="images/logo2.png">
<li>Work</li>
<li>About</li>
<li>Thoughts</li>
<li>Contact</li>
</ul>
CSS:
#nav {
width:100%;
float:left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #D0489A;
border-bottom: 3px solid #D0489A;
}
#nav ul {
position: absolute;
right:0px;
bottom: 2px;
}
#nav li {
float: left;
font-family: whitney light, sans-serif;
}
#nav li a {
list-style: none;
display:inline;
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
#nav li a:hover {
color: black;
background-color: white;
}
#logo {
width:200px;
}
#nav li a {
list-style: none;
display: inline-block;
padding: 8px 15px;
margin-top:174px; // you may need to adjust to get lined up perfectly
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
Related
Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
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/
I have an ul of navigation links nested in a div which is in turn nested into a 'header' div. My header div also contains a banner image, which should display in the top left corner of the website, and next to the banner I want my navigation links, which contain drop down menus when moused over.
Right now I am floating the banner to the left, and the nav links are automatically displaying next to the banner at my desktops resolution. The problem with this method is that once I resize the browser window the nav links begin to wrap around the banner and it looks terrible. Ideally I want the banner and the nav links to stay on the same line no matter the resolution of the device my site is viewed on.
Here is a jfiddle with an example of how my site displays. When I view the site at my default resolution of 1920x1080 it displays fine, but when I resize it does some funky stuff.
<!--- header div containing banner image and navigation bar --->
<div class="header">
<img id="banner" src="img/image.png" alt="Banner image displays here">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>Donations</li>
<li>Volunteering</li>
<li>Housing</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
/* relevent css for header, banner image, and navigation */
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; margin:0px; padding:0px;}
a:link, a:visited, a:active {color:#FFFFFF; text-decoration: none;}
a:hover {color: #C0C0C0; text-decoration: none;}
.header {width: 100%; margin:0; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
#banner { float: left; max-width:100%; margin: 0; padding: 0; border: none;}
#w { max-width:50%; background-color: #FFFFFF; margin: 0; padding: 0; border: none; }
#ddmenu {
max-width: 50%;
height: 68px;
margin: 0 auto;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
cursor: pointer;
outline: none;
font-weight: bold;
color: #8aa8bd;
}
#ddmenu li { display: inline-block; float: left; font-size: 1.00em;}
#ddmenu li a {
display: block;
float: left;
padding: 0 10px;
line-height: 4.9em;
font-weight: bold;
text-decoration: none;
color: #FF0000;
}
#ddmenu li:hover > a { color: #FFF; background-color: #FF0000;}
#ddmenu li:hover ul {display: block;}
/*Fills gap between top level li and nested ul so that the above mouse hover pseudoclass selecting ul works*/
#ddmenu > li:after {
content: " ";
position: absolute;
bottom: -12px;
left: 0;
width: 100%;
height: 12px;
background: transparent;
}
#ddmenu ul {
position: absolute;
top: 80px;
width: 120px;
background: #fff;
display: none;
margin: 0;
padding: 4px 4px;
list-style: none;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/* tooltip arrow */
#ddmenu ul:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 8px;
border-width: 0px 8px 8px 8px;
border-style: solid;
border-color: #fff transparent;
}
#ddmenu ul:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 4px;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
#ddmenu ul li {
display: block;
width: 100%;
font-size: 0.9em;
}
#ddmenu ul li a {
display: block;
width: 100%;
padding: 6px 2px;
line-height: 1.4em;
}
I removed a lot of your styling because there is a lot of CSS to debug, but take a look at this Fiddle. I think it shows a simpler example of the effect you are going for and you may be able to work from the CSS.
Here's a breakdown of the most important parts of the CSS:
.header ul { list-style-type: none; }: don't show bullets
.header li { display: inline-block; }: make the list items sit next to each other horizontally instead of stacking in a column like normal
.header ul ul li { display: block; }: Not for submenus, though. Still want those in a stack.
.header ul ul { display: none; }: Don't show the nested lists...
.header li:hover ul { display: block; }: ...until we hover over the parent
.header li:hover ul { position: absolute; }: binds to nearest non-statically positioned ancestor
.header li { position: relative; top: 0; left: 0; }: which is its parent thanks to this trickery. Remember to specify top and left even if you're not moving anywhere or certain browsers will ignore you.
The rest is just fluff to make it look a little better. Since you're using inline-block to take care of most of the effect, you get resizing and wrapping for free.
http://jsfiddle.net/zcfqu/
Been playing around with this piece of code for a while and am confused a bit.
How do I:
Change the color of the each submenu?
Make the submenu the same width as the main button?
HTML
<ul id="menu">
<li>This is the button
<ul class="submenu">
<li>Button one
</li>
<li>Button two
</li>
<li>Button three
</li>
</ul>
</li>
</ul>
Remove all floats and position:absolute
Check this demo
I just removed all floats (which was causing funny jumping of li and really not needed) and position:absolute (which was causing menu to shift sideways)
Also, I didn't read through all your CSS to find which background property is overriding which one, but I just removed them all and added new ones at bottom.
#menu > li { background-color: red; }
#menu > li:hover { background-color: green; }
.submenu li { background-color: blue; }
.submenu li:hover { background-color: yellow; }
EDIT 1
Its a good idea to use CSS shorthands and reduce CSS size and also make it more readable. Also, remove all incorrect CSS and you can also write border-radius: 2px 2px 2px 2px as border-radius: 2px (and save 12 bytes :O)
EDIT 2
CSS shorthands - MDN
font shorthand - W3C
background shorthand - W3C (scroll to the very bottomo of the page)
Change the color of the each submenu
ul.submenu a:hover {
background-color: red !important;
}
This changes on hover. If you want it always the same color remove :hover
Make the submenu the same width as the main button
ul.submenu, ul.submenu>li {
width: 100%;
}
This way you don't need to apply a fixed width. The browser will calculate it using parents adapted width.
Demo
Here is the correct approach in tackling your issues
DEMO http://jsfiddle.net/kevinPHPkevin/zcfqu/37/
// be more specific when targeting
ul#menu ul.submenu li a:hover {
background-color: green;
}
// set width to match button size
ul.submenu, ul.submenu>li {
width: 100%;
}
// assign classes for different coloured buttons. You could do this with css3 and `nth child` but it would limit your browser support considerably.
ul#menu .submenu li.btn1 a {
background: red;
}
ul#menu .submenu li.btn2 a {
background: yellow;
}
ul#menu .submenu li.btn3 a {
background: blue;
}
Take a look to this, I changed the background, and the "hover" and the width. It is correct ? Fiddle
ul#menu, ul#menu ul.sub-menu and ul#menu, ul.submenu --> width: 200px;
ul#menu li a for the background
I've set each li as 150px width. This has fixed the issue.
http://jsfiddle.net/andaywells/zcfqu/34/
ul#menu ul.submenu li {width: 150px;}
You can try the css as below with no changes on the html elements. I have added some comments for your references. Only 3 changes made on the css.
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
font-family: Helvetica;
background-color: #57AD68;
color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
font-size: 12px;
font-style: normal;
font-weight: 400;
height: 40px;
line-height: 39px;
padding: 0 20px;
position: relative;
text-align: center;
vertical-align: bottom;
border-radius: 3px 3px 3px 3px;
border-style: none none solid;
border-width: 0 0 1px;
cursor: pointer;
display: inline-block;
float: center;
list-style-type: none;
text-decoration: none;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 134px; /*Adjust the sub menu width*/
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
/* Main Button */
ul#menu li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 0 20px;
background: ; /*Remove the color here to avoid overlapped*/
float:right;
border-radius: 2px 2px 2px 2px;
font-family: Helvetica;
}
ul.submenu a:hover {
background: red;
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:right;
background-color:green; /*Adjust the color of sub menu.*/
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: ;
}
ul#menu li:hover li a:hover {
opacity:0.9;
}
This here is my code, what I want to do is that I have to place images right next to the vertical navigation bar without disturbing the order of the list. I tried it many times but I wasn't successful, here is my code
THE HTML PART
<ul class="navbar">
<li>» Computers
</li>
<li>» Storage Media</li>
<li><a href="#" >» Networking Solutions</a></li>
<li>» Security Solutions</li>
<li>» Office Automations</li>
<li>» Gadgets</li>
<li>» Projectors and Display Screens</li>
<li>» Softwares</li>
<li class="lastitem">» Customized Solutions</li>
</ul>
THE CSS PART(describes the behavior of the list only)
.navbar{
list-style-type: none;
margin: 0;
padding: 10 0px;
width: 280px; /* width of menu */
position:absolute;
}
.navbar li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}
.navbar li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.navbar li a:visited, .navbar li a:active{
color: white;
}
.navbar li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black;
}
.navbar ul li:hover{
background-color: black;
color: #ff0066;
display:block;
width:200px;
height:200px;
opacity:0.75;
}
.navbar ul li:hover{
padding:5px;
margin:0px;
background-color:#666666;
border-width:1px;
border-style:solid;
border-color:#333333;
}
.navbar li {
border-bottom: 1px solid white;
margin-left: 40%;
}
.navbar {
list-style-type: none;
margin: 0px;
width: 100%;
position: absolute;
}
Take out the position: absolute and add display: block; float:left to .navbar.
And add an image with float: left;.
Fiddle